angularjs - value - Angular update object in array




ng-repeat (3)

I wanna update an object within an objects array. Is there another possibility than iterating over all items and update the one which is matching? Current code looks like the following:

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;
            }
        }
    }
});

Filters that help in finding the element from the array, can also be used to update the element in the array directly. In the code below [0] --> is the object accessed directly.

Plunker Demo

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


Going off your plunker, I would do this:

  • Change

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

    to be

    <a href="javascript:;" ng-click="selectSubObject($index)">Edit</a>
  • Then use the array index within your $scope.selectSubObject method to directly access your desired element. Something like this:

    $scope.selectSubObject = function(idx) {
      $scope.selectedSubObject = angular.copy(
        $scope.selectedMainObject.subObjects[idx]
      );
    };

If however, you only have the id to go off of, then you can use the angular filterService to filter on the id that you want. But this will still do a loop and iterate over the array in the background.

See angularjs documentation for ngrepeat to see the variables that it exposes.


There are several ways to do that. Your situation is not very clear.

-> You can pass index instead of id. Then, your update function will be like:

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

-> You can use ng-repeat on your view and bind object properties to input elements.

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




angularjs