two way binding not working with ng-repeat

Question

I have a simple ng-repeat list, in which i am assigning current list item value to another property on the controller as follows:

  <li ng-repeat="num in list">
    <input type="text" ng-init="value = num" ng-model="value" />
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button>
  </li>

But when i click the Save button i get default value set for $scope.value. I expect the value for the particular input text to be displayed.

Here is the controller:

 angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = false;
      $scope.list = [0, 1, 2, 3, 4];
      
      $scope.save = function() {
         alert($scope.value);
      }
    });

How can i access the updated value of a input item in my controller on save function call.

Here is the plunker for the same: plnkr

Update: I am expecting the value to be fetched to controller without passing it as a parameter.

Solution 1

Wow I can't believe most people have missed this. If you are using Angular 1.2 then you should definitely check out track by keyword in your ngRepeat directive.

<li ng-repeat="num in list track by $index">
    <input type="text" ng-model="list[$index]" />
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button>
</li>

Bottom line is stay away from primitive types when binding since it will give you sync issues.

Fellas please put more time and effort into researching your solutions instead of just posting for points.

Hope this helps!

Solution 2

ngRepeat create a scope, so, object is passed by reference and number by value. Your code is problematic, if you successfully update the value, it will update all the numbers in ng-repeat. You can do this:

html

    {{value.val}} <!-- for check the value -->
<li ng-repeat="num in list">
    <input type="text" ng-model="num" />
    <button type="button" class="btn btn-primary" ng-click="value.val=num">Save</button>
  </li>

javascript

angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = {val:false};
      $scope.list = [0,1,2,3,4];
});

http://jsfiddle.net/oq6zdeLd/

I'm sorry about my english...

Comments

[jsbisht]

I am expecting the value to be fetched to controller without passing in a parameter actually.

[Harpreet Singh]

according to me this is not Idea behind data binding.A controller's job with respect to Angular is to set up functions and properties that the view can use.please refer this link

[Harpreet Singh]

@jsbisht In this case you dont have to pass value as argument. 'angular.module('myApp', []) .controller('MyController', function($scope){ $scope.value = false; $scope.list = [0, 1, 2, 3, 4]; $scope.getValue = function(){ $scope.ValuetoSave= $scope.value; } $scope.save = function() { alert($scope.ValuetoSave); } $scope.$watch('$scope.value', $scope.computeNeeded); });