javascript - AngularJS 1.5.x 中的嵌套列表以及正确的 ng-model 和 ng-value

Question

我在 AngularJS 中有一个嵌套列表/数组:

$scope.myCars = [
    name: 'Audi', types: [
        {name: 'A4', price: '150000'},
        {name: 'A6', price: '250000'},
        {name: 'A8', price: '350000'}
    ],
    name: 'BMW', types: [
        {name: 'M1', price: '250000'},
        {name: 'M3', price: '450000'}
    ]
];

我循环遍历列表并通过以下方式生成 DOM:

<ul>
    <li ng-repeat="car in MyCars">
        {{car.name}}:
        <ul>
            <li ng-repeat="type in car.types">
                {{type.name}}:
                <input ng-model="type.name" ng-value="type.price">
            </li>
        </ul>
    </li>
</ul>

它确实正确显示了所有内容，但是当我更新输入字段中的价格时，$scope.myCars 中的 $watch 更改了 type.name 而不是 type.price - 这是错误的。

我做事正确吗？

Answer 1

您正在使用ng-model="type.name"它设置此输入的值和 type.name 之间的双向数据绑定(bind)。如果你想与type.price进行数据绑定(bind)使用这个代替:

<input ng-model="type.price">

请注意，没有 ng-value在这里，因为它不适用于 ng-model对于相同的文本输入元素，因为 ng-model覆盖 ng-value 中的值.

注:ng-value不适用于<input type="text"> ，它的意思是 <input type="radio">或option .