Question

我正在给AngularJS一个bash，我正在尝试一个小测试应用程序，我在左边有一个列表，根据选择的内容，更新右侧的表单以允许编辑参数。这是HTML

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="tstApp" ng-controller="tstCtrl">

<div>
    <select size="2" style="width: 100px"
        ng-model="selected"
        ng-options="i as i.name for i in items track by i.name"
    />
</div>

<div>
    <input type="text" name="descr" value="{{selected.descr}}"/><br/>
    <input type="text" name="ref" value="{{selected.ref}}"/><br/>
</div>

<script src="test.js"></script>

</body>
</html>

这是JavaScript

var tstapp = angular.module('tstApp', [])
tstapp.controller('tstCtrl', function($scope) {
    $scope.items = [
                {
                        "name" : "ITEM1",
                        "descr" : "This is item1",
                        "ref" : "Reference1"
                },
                {
                        "name" : "ITEM2",
                        "descr" : "This is item2",
                        "ref" : "Reference2"
                }
    ];
    $scope.selected = $scope.items[0];
});

这样做的问题是，当您在编辑字段中实际更改说明时，它仍然是这样，并且不再反映数组项的值。我认为原因很明显，因为选择了＃39;是数组项的副本，而不是它自己的项。我似乎无法弄清楚如何直接编辑数组项，尽管当前已选中它。

Answer 1

您必须将其绑定为ng-model才能获得更改

喜欢这个

 <input type="text" name="descr" ng-model="selected.descr"/>

的 JSFIDDLE

AngularJS通过引用编辑JSON数组

1 个答案: