AngularJS updating ng-repeat via input not working?

Question

I'm trying to update values in a ng-repeat on a ng-model;

I have the current directive:

app.directive('myDirective', function () {
  return {
    require: 'ngModel',
    restrict: 'E',
    template: '<div ng-repeat="e in model"><input ng-model="e"/></div>',
    scope: { 
      ngModel: '='
    },
    link: function($scope, elem, attrs, ngModelCtrl) {
      $scope.$watch(function (){
          return ngModelCtrl.$modelValue; 
      }, function (v) {
          $scope.model = ngModelCtrl.$viewValue;
      });
    }
  };
});

but it isn't updating the value as illustrated here: http://plnkr.co/edit/E89sbXY0gUw53EmJobz0?p=preview

anybody knows what might be wrong?

kukkuz · Accepted Answer · 2016-07-27 10:10:32Z

1

http://plnkr.co/edit/2JwxNzBRQa1dzACoJIpF?p=preview

Had to replace $scope.model = ngModelCtrl.$viewValue; with scope.model = ngModelCtrl.$viewValue; and it works fine.

app.directive('myDirective', function () {
  return {
    require: 'ngModel',
    restrict: 'E',
    template: '<div ng-repeat="e in model"><input ng-model="e"/></div>',
    scope: { 
      ngModel: '='
    },
    link: function(scope, elem, attrs, ngModelCtrl) {
      console.debug()
      scope.$watch(function (){
          return ngModelCtrl.$modelValue; 
      }, function (v) {
          scope.model = ngModelCtrl.$viewValue;
      })
    }
  };
});

UPDATE: I converted 'stuff' to an array of objects and now it works:

http://plnkr.co/edit/2JwxNzBRQa1dzACoJIpF?p=preview

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.stuff = [{number: 1},{number: 2},{number: 3}];
});

app.directive('myDirective', function () {
  return {
    require: 'ngModel',
    restrict: 'E',
    template: '<div ng-repeat="e in model"><input ng-model="e.number"/></div>',
    scope: { 
      ngModel: '='
    },
    link: function(scope, elem, attrs, ngModelCtrl) {
      console.debug()
      scope.$watch(function (){
          return ngModelCtrl.$modelValue; 
      }, function (v) {
          scope.model = ngModelCtrl.$viewValue;
          console.log(scope.model)
      })
    }
  };
});

edited Jul 27, 2016 at 10:10

answered Jul 27, 2016 at 9:35

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

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

2 Comments

Kiwi Over a year ago

Euhm, sorry apparently forgot to save that, but the problem isn't showing the inputs, it's updating the values, on your example that problem exists as well

Shintu Joseph Over a year ago

@kukkuz you must have used ngModelCtrl.$render rather than watching for changes

Abdul Mateen Mohammed · Accepted Answer · 2016-07-27 10:16:56Z

@Kiwi ng-repeat creates a child scope and ng-model will use the property on the child scope, because ng-model binding will evaluate on the current scope. This is the reason why the json presented in the view doesn't change in your example as it was bound to a property on the child scope created by the ng-repeat directive.

Check this simple jsfiddle example I hope it will be of help to you.

<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    {{ctrl.numbers | json}}    
    <numbers numbers="ctrl.numbers"></numbers>
  </div>
</div>


angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .controller('NumbersController', NumbersController)
  .directive('numbers', numbers);

  function DefaultController() {
    var vm = this;
    vm.numbers = [1, 2, 3];
  }

  function numbers()
  {
    var directive = {
      restrict: 'E',
      scope: {
        numbers: '='
      },
      template: '<div ng-repeat="number in vm.numbers"><input type="number" ng-model="vm.numbers[$index]"/></div>',
      bindToController: true,
      controller: NumbersController,
      controllerAs: 'vm'
    };

    return directive;
  }

  function NumbersController() {
    var vm = this;
  }

Collectives™ on Stack Overflow

AngularJS updating ng-repeat via input not working?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related