修改ng-repeat中顯示的對象中的數組

我試圖使用包含數組內容的輸入元素來更新頁面上的ng-repeat中顯示的$ scope對象的數組。該plunker例子可以在這裏找到：Plunker demo（基本，剝奪了我的問題的例子）修改ng-repeat中顯示的對象中的數組

我有以下設置對象定義：

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

我的目標是先填充一個項目更改更新數組中的$scope.settings.list每當內容<input>領域，但我還沒有如何在視圖想通了。忽略輸入上的ng-model和ng-change在文本框中正確地呈現輸入值，但是當進行更改時，數組不會被修改。

邊注：在Plunker示例中，我在設置對象上有$watch。在我的實際代碼中，這用於使用$cookies module來更新「設置cookie」。示例中省略了Cookie，但出於調試目的，我已將手錶放入。

來源

2013-01-19 Jay Querie

您的方法存在兩個主要問題。第一個是ngRepeat使用繼承範圍，所以原始值（如字符串和數字）不能很好地播放。您應該將對象數組傳遞給ngRepeat而不是基元數組。你的第二個問題是綁定到輸入的過於複雜的方式。所有你需要的是這樣的：

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

這裏有一個修訂plunker：http://plnkr.co/edit/ZGFjBnVSwM4hNSgVSOCW?p=preview。

來源

2013-01-19 00:44:57

修改ng-repeat中顯示的對象中的數組

回答

相關問題