ng-model in ng-repeat become undefined

Question

Using Javascript with angularJs, I kind the following code :

JS

 $scope.myObj = { 'sthg': '', 'a': [{ 'b' : '' }] }

HTML

<p ng-repeat="radio in fiche.radios"> <input type="text" ng-model="radio.code" placeholder="Numéro de cliché" ng-required="true" /> <span > <button type="button"ng-click="removeRadioList($index);" ng-disabled="fiche.radios.length === 1"> <i>X</i> </button> </span> </p>

http://plnkr.co/edit/LOgk7Nudse0srS7Bs1G6?p=preview

In my App $scope.myObj.a[0].b is undefined with the ng-repeat (if I remove ng-repeat, it will be defined). In the plunkr it is defined even after the run of ng-repeat, but I managed to have the behaviour when I enter something in the input and then delete it.

I don't get what's hapening, I would like to understand why and if it is a good way to do ?

sylwester · Accepted Answer · 2014-11-17 12:09:03Z

Beacause you set ng-required="true" on your input tag angular wouldn't bind empty value to your model thous when you delete value from input your console shows you radios.code as undefined.

Please see below for working demo:

(function() { "use strict"; var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope, $log) { $scope.ficheInit = { 'user_id': '', 'radios': [{ 'code': '' }] }; $log.log($scope.ficheInit); $scope.fiche = angular.copy($scope.ficheInit); $log.log($scope.fiche); $scope.addRadioList = function() { $scope.fiche.radios.push({ 'code': '' }); } $scope.removeRadioList = function(i) { $scope.fiche.radios.splice(i, 1); } $scope.disableAddRadio = function() { console.log($scope.fiche.radios); return !(angular.isDefined($scope.fiche.radios[$scope.fiche.radios.length - 1].code) || $scope.fiche.radios.length < 1); } }); }());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="plunker"> <div ng-controller="MainCtrl"> <button ng-click="showForm=true;">SHOW</button> <div ng-show="showForm"> <button ng-click="addRadioList();" ng-disabled="disableAddRadio()">Ajouter un cliché</button> <p ng-repeat="radio in fiche.radios"> <input type="text" ng-model="radio.code" placeholder="Numéro de cliché" /> <span> <button type="button" ng-click="removeRadioList($index);" ng-disabled="fiche.radios.length === 1"> <i>X</i> </button> </span> </p> </div> {{fiche.radios}} </div> </div>

Collectives™ on Stack Overflow

ng-model in ng-repeat become undefined

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related