我正在尝试将对象数组绑定到html。但是当我更改输入值时,模型没有更改。我做错了什么?
抱歉,这是非常简单的情况,但我很困惑。
我的网页:
<div ng-app="myApp" ng-controller="myCtrl">
<table class="price-table">
<tbody>
<tr ng-repeat="item in prices track by $index">
<td><span>{{item.country_code}}</span></td>
<td><input ng-value="prices[$index].price" ng-input="item.price = item.price" ng-disabled="!item.editMode" type="text"/></td>
<td><button class="btn price-table-btn" ng-click="item.editMode = !item.editMode" ng-disabled="item.noEdit">✎</button></td>
<td><button class="btn price-table-btn" ng-click="savePrice($index, item)" ng-disabled="!item.editMode">✓</button></td>
<td><button class="btn price-table-btn" ng-click="removePrice($index, item)" ng-disabled="!item.editMode">×</button></td>
</tr>
</tbody>
</table>
<div>
{{prices}}
</div>
</div>
我的代码:
angular.module('myApp', []);
angular.module('myApp')
.controller('myCtrl', function($scope) {
$scope.prices = [{"country_code":"00","price":"12.00","editMode":false,"noEdit":false},{"country_code":"01","price":"1.00","editMode":false,"noEdit":false},{"country_code":"AU","price":"8.00","editMode":false,"noEdit":false},{"country_code":"CA","price":"5.00","editMode":false,"noEdit":false},{"country_code":"GB","price":"10.00","editMode":false,"noEdit":false},{"country_code":"UK","price":"10.00","editMode":false,"noEdit":false},{"country_code":"US","price":"3.00","editMode":false,"noEdit":false}];
});
http://jsfiddle.net/jaxxreal/ntb5b79w/
使用 ng-model
<input ng-model="item.price" ng-disabled="!item.editMode" type="text"/>
演示:小提琴
ng-value 不用于 2 路绑定,它用于选择/输入无线电元素
你需要使用,ng-model="prices[$index].price"
而不是,ng-value="prices[$index].price"
演示