特定の文字列で始まるキーを持つ$ scope内のオブジェクトを探しますか？

Question

私は$スコープ にあるオプション*のすべてを見つけるしたいと思い、この

<ul> 
     <li><input type="text" name="option1" ng-model="option1" /></li> 
     <li><input type="text" name="option2" ng-model="option2" /></li> 
    </ul> 

のようなテキストフィールドのリストを持っているが、答え

Answer 1

のために事前にありがとう私はなるだろう入力データを保持し、この配列をhtmlで反復処理するためのループを追加する配列。特定のオブジェクトのスコープ内を検索する必要はなく、配列を準備できます。

$scope.allOptions = [ 
    {name: 'option1', text: ''}, 
    {name: 'option2', text: ''} 
]; 

そして：

<ul> 
    <li ng-repeat="option in allOptions"><input type="text" name="{{option.name}}" ng-model="option.text" /></li> 
</ul> 

の問題は、私は、リスト内のテキストフィールドの番号がわからないということです。アプリケーションにはデフォルトで2つのリストがありますが、ユーザーがプログラムで新しいオプションを追加できるボタンもあります。したがって、Jqueryでは、すべてのテキストフィールドにngモデルのプログレッシブな数値を追加します。最初のng-model = option1、2番目のオプション2、...

私は角度を使用して（別の入力を追加する）ことをお勧めします。

$scope.addInput = function(){ 
    var n = $scope.allOptions.length; 
    $scope.allOptions.push({name: 'option'+(n+1), text: ''}); 
}; 

<button ng-click="addInput()">Awesomeness is here</button> 

Answer 2

これを行うにはいくつかの方法があります。

See this working jsFiddle

私はあなたがそれをやった方法への自然な次のステップとなり、そしてあなたが要求としてあなたが値にアクセスできるようになる示しています最初の方法。

まず、そのような配列に、あなたの入力をバインドします

<ul> 
    <li><input type="text" name="option[1]" ng-model="option[0]" /></li> 
    <li><input type="text" name="option[2]" ng-model="option[1]" /></li> 
    <li><input type="text" name="option[3]" ng-model="option[2]" /></li> 
</ul> 

をコントローラ内の配列としてあなたの変数を宣言することを忘れないでください：あなたのコントローラでは、

$scope.option = []; 

その後$scope.optionからアクセスできます。

非常に高度で、簡単で維持しやすい方法は、非常に強力なng-repeatを使用することがあります。 ng-repeat documentation

使用するにはng-repeat：

まず、オブジェクトの配列あなたのコントローラでは、そのような設定：次に

$scope.rOptions = [ 
    {name: 'option1', val: ''}, 
    {name: 'option2', val: ''}, 
    {name: 'monkey', val: ''} 
]; 

、出力することができ、マークアップの単純化されたセットを持つHTML：

<ul> 
    <li ng-repeat="rOption in rOptions"><input name="{{rOption.name}}" ng-model="rOption.val"></li> 
</ul> 

コントローラでは、$scope.rOptionで値にアクセスできます。

これらの2つの仕組みやデータへのアクセス方法については、上記のフィディードをご覧ください。