CODEWITHSUNDEEP
arraysangularjs
Sandeep Kumar M
Sandeep Kumar M

Reputation: 3851

How to bind element with ng-model from an object array key

This is the scenario

angular.module('myApp', [])
.controller('bookCtrl', function($scope) {
    $scope.book = {
        name: 'Session Invites',
        friends: [
             {'id': 1, 'name': 'raju' },
            {'id': 2, 'name': 'radha' },
            {'id': 3, 'name': 'luttappi' },
            ]
    };
    $scope.update = function(){ 
        $scope.book.friends[1] = {'id': 2, 'name': 'sam' };
        alert($scope.book.friends[1].name );
    };
});
<div ng-controller="bookCtrl">
    <input type="text" ng-model="book.friends[1].name"/>
    <input type="button" id="btn" name="btn" value="update" ng-click="update()"/>
</div>

I would like to use "id" instead of array "index". fiddle

<input type="text" ng-model="book.friends[1].name"/>

Upvotes: 0

Views: 27727

Answers (3)

Linh Pham
Linh Pham

Reputation: 3025

It will be possible with a for loop but, I think this work around below maybe interesting for you.

Just change the structure of your JSON, using Object.proerty instead of an array. It will do the tricks.

angular.module('myApp', [])
.controller('bookCtrl', function($scope) {
    $scope.book = {
        name: 'Session Invites',
        friends: {
            id1: {'name': 'raju' },
            id2: {'name': 'radha' },
            id3: {'name': 'luttappi' },
        }
    };
    $scope.update = function(){ 
        $scope.book.friends.id1 = {'name': 'sam' };
        alert($scope.book.id1.name );
    };
});

NOTE: There's a concern about this workaround is the API providing the JSON. If the data recived structure fixed and angular need to convert JSON to this structure. You might need to aware of how huge is it the data that going to be converted. Because such task like this will cause Memory Leaked then JavaScript Garbage Collection. And it will slow down your app significantly

Upvotes: 1

Sonu Singh
Sonu Singh

Reputation: 187

You can use this instead:

    angular.module('myApp', [])
    .controller('bookCtrl', function($scope) {
    $scope.GetOne={};
        $scope.book = {
            name: 'Session Invites',
            friends: [
                 {'id': 1, 'name': 'raju' },
                {'id': 2, 'name': 'radha' },
                {'id': 3, 'name': 'luttappi' },
                ]
        };
        $scope.update = function(){ 
            $scope.GetOne=$scope.book.friends[1];
            alert($scope.GetOne.name );
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="bookCtrl">
      <input type="text" ng-model="GetOne.name" />
      <input type="button" id="btn" name="btn" value="update" ng-click="update()" />
    </div>
  </div>

Upvotes: -1

sylwester
sylwester

Reputation: 16498

You can do that in this way:

angular.module('myApp', [])
    .controller('bookCtrl', function ($scope) {
    $scope.book = {
        name: 'Session Invites',
        friends: [{
            'id': 1,
                'name': 'raju'
        }, {
            'id': 2,
                'name': 'radha'
        }, {
            'id': 3,
                'name': 'luttappi'
        }]
    };
    $scope.update = function (friend) {

        alert(friend.name);
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="bookCtrl">
    <div ng-repeat="friend in book.friends">
      <input type="text" ng-model="friend.name" />
      <input type="button" id="btn" name="btn" value="update" ng-click="update(friend)" />
    </div>
  </div>
</div>

Upvotes: 2

Related Questions