ng-model does not work on angulargs ng-repeat

Question

ng-model does not work on angulargs ng-repeat

Navigation

#1 by (2 votes)

1

I have the following JSON:

usuarios:{
    {name:pepe, telefonos:{movil:166666666, movil2:66852147}}, 
    {name:paco, telefonos:{movil:66666666, movil2:66852147}} 
}

and my index.html

<div ng-controller="TestController"> 
     <div ng-repeat="user in usuarios">  
         {{user.name}} 
         <div ng-repeat="phone in user.telefonos">
             <input type="text" name="movil1" ng-model="movil1" ng-value="{phone.movil1}}">
             <input type="text" name="movil2" ng-model="movil2" ng-value="{phone.movil2}}"> 
         </div>
    </div>
    <input type="text" name="movil3" ng-model="movil3" ng-value="6555555">
</div>

So far everything is correct, it works, BUT, in my controller if I do this:

console.log($scope.movil1) => sale undefined

however I do this:

console.log($scope.movil3) => sale el valor

It has to do something with the repeat

Any suggestions?

Greetings

angularjs

asked by sirdaiz 05.09.2016 в 18:30

source

1 answer

Variable returns to 0 when returning to main menu C # TokenMismatchException in VerifyCsrfToken sending ajax by POST. ERROR 500

score 2 · Accepted Answer

This happens because the ng-repeat directive creates a $scope for each element of the iteration so when you say ng-model = "movil1" you are not referring to the property movil1 of $scope of your controller but to one of children that creates ng-repeat .

To solve this you must use an object in your controller to avoid incurring the dot notation problem. Lee

$ scope vs. this in angularjs

In your case you have an arrangement of users so if you bindeas directly you will have all your inputs modifying exactly the same value. You must use an arrangement or an object so that the binding is done in different places.

Also to initialize the value of the model you must use ng-init instead of ng-value

Using an array

angular.module('app', [])
  .controller('TestCtrl', function($scope, $timeout) {
    $scope.datos = [];

    $scope.usuarios = [{
      name: 'pepe',
      telefonos: {
        movil: 166666666,
        movil2: 66852147
      }
    }, {
      name: 'paco',
      telefonos: {
        movil: 66666666,
        movil2: 66852147
      }
    }];

    $timeout(function() {
      console.log($scope.datos);
    });

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="TestCtrl">
  <div ng-repeat="usuario in usuarios">
    {{usuario.name}}
    <input type="text" ng-model="datos[$index].movil1" ng-init="datos[$index].movil1 = usuario.telefonos.movil">
    <input type="text" name="movil2" ng-model="datos[$index].movil2" ng-init="datos[$index].movil2 = usuario.telefonos.movil2">
  </div>
</div>

Using an object

angular.module('app', [])
  .controller('TestCtrl', function($scope, $timeout) {
    $scope.datos = {};

    $scope.usuarios = [{
      name: 'pepe',
      telefonos: {
        movil: 166666666,
        movil2: 66852147
      }
    }, {
      name: 'paco',
      telefonos: {
        movil: 66666666,
        movil2: 66852147
      }
    }];

    $timeout(function() {
      console.log($scope.datos);
    });

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="TestCtrl">
  <div ng-repeat="usuario in usuarios">
    {{usuario.name}}
    <input type="text" ng-model="datos[usuario.name].movil1" ng-init="datos[usuario.name].movil1 = usuario.telefonos.movil">
    <input type="text" name="movil2" ng-model="datos[usuario.name].movil2" ng-init="datos[usuario.name].movil2 = usuario.telefonos.movil2">
  </div>
</div>