новый элемент в ng-repeat меняется

0

Я пытаюсь добавить объект в 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!!!!" />

он добавляет столько записей, которые я хочу, и работает так, как ожидалось.

Что не так с первым подходом?

Теги:

2 ответа

1
Лучший ответ

ng-model="models.name" создает объект в области с именем "models". Изменения в models.name и models.no будут изменять значения внутри этого объекта, но он все еще является единственным объектом - поэтому datas.add(model) завершает работу, ссылаясь на этот единственный объект на this.dataset. Дальнейшие изменения в model изменят исходный объект, который уже находится в this.dataset, потому что все ссылается на тот же объект.

Ваш другой подход работает правильно, потому что вы используете отдельные примитивы для ng-model="name1" и ng-model="no1". Здесь каждый раз, когда datas.add(name1,no1) запускается, он this.dataset вновь созданный объект на this.dataset. Дальнейшие изменения в name1 и no1 теперь не будут изменять старые данные, потому что они являются примитивами, а не ссылками на объекты, и каждый раз, когда вы нажимаете на this.dataset вы this.dataset новый объект из этих примитивов.

Поделиться
  • 0
    вот еще немного информации об этом - stackoverflow.com/questions/14049480/…
  • 0
    Насколько это актуально?
Показать ещё 2 комментария
0

Когда вы нажимаете объект модели, который вы передаете методу add() в массив, вы фактически нажимаете ссылку на этот объект, и теперь Angular будет использовать двустороннюю привязку данных к нему. Что вам нужно сделать, это сначала скопировать модель, чтобы она отделяла ее от директив ng-model в вашем HTML.

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

Здесь Plunker: http://plnkr.co/edit/SdtSesYxb828yJyDFwws?p=preview

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню