Question

我正在尝试在ng-repeat中添加一个对象，如图所示：

<div ng-controller="filtersController as datas">
    <table>
        <tr>
            <th>Names</th>
            <th>nos</th>
        </tr>
        <tr ng-repeat="data in datas.dataset">
            <td>{{data.name}}</td>
            <td>{{data.no}}</td>
        </tr>
    </table>

    <input type="text" ng-model="models.name" placeholder="enter name" />
    <input type="number" ng-model="models.no" placeholder="enter number" />
    <input type="button" ng-click="datas.add(models)" value="click me!!!!" />
 </div>

相关的javascript是：

    app.controller('filtersController', ['$scope', function ($scope) {
this.dataset = [{ name: "Vishesh", no: 1 },
                { name: "pqrst", no: 2 },
                { name: "uvwxyz", no: 3 }]
this.add = function (model) {
    this.dataset.push(model);
    $scope.$apply();
}}]);

问题：

当我尝试使用文本框添加新条目时，它将添加第一个条目，但之后我无法在其中添加任何条目，当文本框中的值更改时，最新添加的条目也会更改。这是为什么？

此外，如果我更改这样的JavaScript：

app.controller('filtersController', ['$scope', function ($scope) {
this.dataset = [{ name: "Vishesh", no: 1 },
                { name: "pqrst", no: 2 },
                { name: "uvwxyz", no: 3 }]
this.add = function (names, nos) {
    this.dataset.push({ name: names, no: nos });
    $scope.$apply();
}}]);

和HTML：

    <input type="text" ng-model="name1" placeholder="enter name" />
    <input type="number" ng-model="no1" placeholder="enter number" />
    <input type="button" ng-click="datas.add(name1,no1)" value="click me!!!!" />

它添加了我想要的多个条目并按预期工作。

第一种方法有什么问题？

Answer 1

ng-model="models.name"在名为＆＃34; models＆＃34;的范围内创建一个对象。对models.name和models.no的更改将更改该对象中的值，但它仍然是一个对象 - 因此datas.add(model)最终会将对该单个对象的引用推送到{{ 1}}。对this.dataset的进一步更改将更改原始对象，该对象已在model中，因为它是对同一对象的所有引用。

您的其他方法可以正常运行，因为您为this.dataset和ng-model="name1"使用了单独的原语。在这里，每次ng-model="no1"运行时，它都会将新构建的对象推送到datas.add(name1,no1)。对this.dataset和name1的进一步更改现在无法修改旧数据，因为它们是原始数据，而不是对象引用，每次推送到no1时，您构建了一个这些原语中的新对象。

Answer 2

当您将传递给add（）方法的模型对象推送到数组上时，您实际上正在推送对该对象的引用，现在Angular将对其使用双向数据绑定。您需要做的是首先复制模型，使其与HTML中的ng-model指令解除关联。

this.add = function(model) {
  var newModel = angular.copy(model);
  this.dataset.push(newModel);
}

这是一个Plunker：http://plnkr.co/edit/SdtSesYxb828yJyDFwws?p=preview

ng-repeat中新添加的项目正在发生变化

2 个答案: