ng-repeat不绑定ng-model对象数组

ng-repeat not bind ng-model array of objects

本文关键字：对象 数组 ng-model 绑定 ng-repeat      更新时间：2023-09-26

我正在尝试将对象数组绑定到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">&#9998;</button></td>
                    <td><button class="btn price-table-btn" ng-click="savePrice($index, item)" ng-disabled="!item.editMode">&#10003;</button></td>
                    <td><button class="btn price-table-btn" ng-click="removePrice($index, item)" ng-disabled="!item.editMode">&times;</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"

演示

相关文章：