2

ng-repeat配列の内容を含む入力要素を使用して、ページに表示される $scope オブジェクトの配列を更新しようとしています。plunker の例はここにあります: Plunker demo (基本的な、私の問題の簡略化された例)

次の設定オブジェクトが定義されています。

$scope.settings = {
  list: ['list item one', 'list item two', 'list item three']
};

そして、ページ上のデータを次のように表しています。

<ul> 
  <li ng-repeat="item in settings.list">
    <input type="text" 
           value="{{item}}" 
           ng-model="singleItem"
           ng-change="settings.list[$index] = singleItem" />
    <a href="javascript:void(0)">delete</a>
  </li>
</ul>

私の目標は、最初に<input>フィールドにコンテンツを入力し$scope.settings.list、アイテムが変更されるたびに配列を更新することですが、ビューでの方法がわかりません。入力の and を省略するng-modelとng-change、入力値がテキスト ボックスに適切にレンダリングされますが、変更が加えられても配列は変更されません。

補足: Plunker の例では$watch、設定オブジェクトを使用しています。$cookies私の実際のコードでは、これはmoduleを使用して「設定 Cookie」を更新するために使用されます。この例では Cookie は省略されていますが、デバッグの目的でウォッチはそのままにしてあります。

4

1 に答える 1

7

あなたのアプローチには主に 2 つの問題があります。1 つ目は、ngRepeat が継承されたスコープを使用するため、プリミティブ値 (文字列や数値など) が適切に再生されないことです。プリミティブの配列ではなく、オブジェクトの配列を ngRepeat に渡す必要があります。2 番目の問題は、入力にバインドする方法が複雑すぎることです。必要なのはこれだけです：

$scope.settings = {
  list: [
    { val: 'list item one'},
    { val: 'list item two'},
    { val: 'list item three'}
  ]
};

そして、あなたの見解では：

<ul> 
  <li ng-repeat="item in settings.list">
    <input type="text" ng-model="item.val"></input>
    <a ng-click="remove($index)">delete</a>
  </li>
</ul>

改訂されたプランカーは次のとおりです: http://plnkr.co/edit/ZGFjBnVSwM4hNSgVSOCW?p=preview .

于 2013-01-19T00:44:57.250 に答える