Angular объект обновления в массиве

Я хочу обновить объект в массиве объектов. Есть ли другая возможность, кроме повторения всех элементов и обновления того, что соответствует? Текущий код выглядит следующим образом:

angular.module('app').controller('MyController', function($scope) {
    $scope.object = {
        name: 'test',
        objects: [
            {id: 1, name: 'test1'},
            {id: 2, name: 'test2'}
        ]
    };

    $scope.update = function(id, data) {
        var objects = $scope.object.objects;

        for (var i = 0; i < objects.length; i++) {
            if (objects[i].id === id) {
                objects[i] = data;
                break;
            }
        }
    }
});

Ответ 1

Существует несколько способов сделать это. Ваша ситуация не очень ясна.

- > Вы можете передавать индекс вместо id. Затем ваша функция обновления будет выглядеть так:

$scope.update = function(index, data) {
    $scope.object.objects[index] = data;
};

- > Вы можете использовать ng-repeat в своем представлении и привязать свойства объекта к элементам ввода.

<div ng-repeat="item in object.objects">
    ID: <input ng-model="item.id" /> <br/>
    Name: <input ng-model="item.name" /> <br/>
</div>

Ответ 2

Фильтры, которые помогают находить элемент из массива, также могут использоваться для непосредственного обновления элемента в массиве. В коде ниже [0] → объект, к которому обращается напрямую.

Демо-версия плунжера

$filter('filter')($scope.model, {firstName: selected})[0]

Ответ 3

Передайте элемент вашему методу обновления. Взгляните на образец ниже.

function MyCtrl($scope) {
  $scope.items = 
    [
      {name: 'obj1', info: {text: 'some extra info for obj1', show: true}},
      {name: 'obj2', info: {text: 'some extra info for obj2', show: false}},
    ];
  $scope.updateName = function(item, newName){
     item.name = newName;
  } 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <table ng-controller="MyCtrl" class="table table-hover table-striped">
    <tr ng-repeat="x in items">
        <td> {{ x.name }}</td>
        <td> 
           <a href="#" ng-show="!showUpdate" ng-click="someNewName = x.name; showUpdate = true">Update</a>
           <div ng-show="showUpdate" ><input type="text" ng-model="someNewName"> <input type="button" value="update" ng-click="updateName(x, someNewName); showUpdate = false;"></div>
         </td>
    </tr>

  </table>
</body>

Ответ 4

Отпусти свой плункер, я бы сделал это:

Изменить

<a href="javascript:;" ng-click="selectSubObject(subObject.id)">Edit</a>

чтобы быть

<a href="javascript:;" ng-click="selectSubObject($index)">Edit</a>

Затем используйте индекс массива в вашем методе $scope.selectSubObject для прямого доступа к вашему желаемому элементу. Что-то вроде этого:
```
$scope.selectSubObject = function(idx) {
  $scope.selectedSubObject = angular.copy(
    $scope.selectedMainObject.subObjects[idx]
  );
};
```

Если, однако, у вас есть только id, вы можете использовать фильтр angular filterService для фильтрации по id, который вы хотите. Но это все равно сделает цикл и перебирает массив в фоновом режиме.

См. angularjs документация для ngrepeat, чтобы просмотреть переменные, которые он предоставляет.