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

Question

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"/>

you can use angular.forEach to iterate and then match the id after iterating the array — Anita
– Anita, Commented Apr 7, 2015 at 10:22
@Anita - i would like to bind the array element directly using ng-model, will that be possible? — Sandeep Kumar M
– Sandeep Kumar M, Commented Apr 7, 2015 at 10:24

sylwester · Accepted Answer · 2015-04-07 10:34:45Z

2

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>

answered Apr 7, 2015 at 10:34

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

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

2 Comments

Sandeep Kumar M Over a year ago

i would like to avoid ng-repeat since textboxes will be placed in different locations in the form, it is not going to be a list.

Satishakumar Awati Over a year ago

How to submit all values with single save button?

Linh Pham · Accepted Answer · 2015-04-07 11:17:29Z

1

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

edited Apr 7, 2015 at 11:17

answered Apr 7, 2015 at 10:25

Linh Pham

3,02527 silver badges36 bronze badges

2 Comments

Sandeep Kumar M Over a year ago

this seems to be a good approach. friends list is a dynamic one, let me see how to load that in this format.

Linh Pham Over a year ago

@CoderHawk Yeap, there're only 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. EDIT: I will update this in the answer for the future use.

Getz · Accepted Answer · 2015-04-07 11:12:45Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related