

Monacaにて、iPhone向けアプリ開発の勉強をしています。  
ons-navigatorにて子画面として表示されたページ内に、以下のようなエレメントがあります。

[code]

    <input type="search" id="id1">
    
[/code]

このタグのvalueを取得し、pushPage("self.html",options)の第2パラメータとして与えたいと考えています。

問題点  
通常ならば、document.getElementById("id1").valueのようにすれば、素直にアクセスできるのですが、同じIDをもつエレメントが複数ある状態では使用できません。

代替案  
思いつきませんでした。

onsen-uiでの常とう手段があれば、ご教示願えないでしょうか。


CC BY-SA 3.0
2015-12-30T05:46:04.537
20470
2016-11-03T00:52:51.257
2015-12-30T05:56:45.613
13843
13843
question
monaca onsen-ui
ons-navigatorにて同一のページを複数表示した場合の、getElementByIdに代わるエレメント検索手段


自己回答になりますが、代替案で、以下のような方法を見つけました。

初心者の為、正しく理解できているか心もとないので、上級者の方、フォローお願いします。

idを使わずに、ng-modelを使用することで、データバインディング（？）できる。

[code]

    <script>
        var module = ons.bootstrap();
    
        module.controller('searchController', function($scope){
            $scope.search = function(search_keyword){
                myNavigator.pushPage('self.html', {keyword: search_keyword});
            };
    
            $scope.options = $scope.myNavigator.getCurrentPage().options;
            if(typeof($scope.options.keyword)=="undefined") $scope.options.keyword="";
            $scope.search_keyword = $scope.options.keyword;
        });
    </script>
    
    <ons-navigator var="myNavigator" page="self.html">
    </ons-navigator>
    
    <ons-template id="self.html">
        <ons-page ng-controller="searchController">
            <input type="search" class="search-input" ng-model="search_keyword" /> 
    
            <ons-button ng-click="search(search_keyword)">
                <div>検索</div>
            </ons-button>
        </ons-page>
    </ons-template>
    
[/code]


CC BY-SA 3.0
2015-12-30T07:19:08.977
20472
2015-12-30T07:19:08.977
13843
20470
answer


そもそもjavascriptでは  
getElement **s** 系で配列として取得することが出来ます。  
後は配列の順番で対象を特定してやれば好きにコントロールできるはずです。

[code]

    getElementsByName("name")
    getElementsByTagName("tagName")
    getElementsByClassName("class")
    
[/code]

ex)

[code]

    fast_input_value = getElementsByTagName("input")[0].value;
    
[/code]


CC BY-SA 3.0
2016-02-29T00:25:31.113
22646
2016-02-29T00:25:31.113
9262
20470
answer