3

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

<input type="search" id="id1">

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

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

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

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

2 件の回答 2

2

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

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

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

<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>
2

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

getElementsByName("name")
getElementsByTagName("tagName")
getElementsByClassName("class")

ex)

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。