AngularJS - ng-repeat - how to create an array with ids

Question

I am using ng-repeat to create an array of items (a list), I would like to have an id against each item to be it's position in the array.

JS FIDDLE DEMO HERE: http://jsfiddle.net/m62Ez/15/

Please have a look at the following, looks like the ng-model="item.id" is never assign. Any suggestions much appreciated.

HTML

 <div ng-controller="MainCtrl">
    <button ng-click="addItem()">Add Item</button>

    <ul>
        <li ng-repeat="item in items">
            <input type="hidden" ng-model="item.id" ng-value="{{$index}}" />
            <input type="text" ng-model="item.name" />
        </li>
    </ul>
    <hr />
    <button ng-click="saveAll()">Save All</button>
</div>

JS

var app = angular.module("app", []);
app.controller("MainCtrl", function ($scope) {

    $scope.items = [];
    $scope.addItem = function () {
        $scope.items.push({});
    }
    $scope.saveAll = function () {
        console.log($scope.items); // item's do not have id's
    }

});

JB Nizet · Accepted Answer · 2014-07-16 15:42:39Z

2

The hidden field isn't useful. If you want your objects to have an ID, then generate them with an ID:

$scope.addItem = function () {
    $scope.items.push({id: $scope.items.length});
}

Updated jsfiddle: http://jsfiddle.net/K7DgE/

answered Jul 16, 2014 at 15:42

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS - ng-repeat - how to create an array with ids

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related