нг-модель в нг-повторе становятся неопределенными

Question

Использование Javascript с angularJs, я как бы следующий код:

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

В моем приложении $scope.myObj.a[0].b не определено с ng-repeat (если я удалю ng-repeat, он будет определен). В plunkr он определен даже после запуска ng-repeat, но мне удалось получить поведение, когда я вводил что-то во вход и затем удалял его.

Я не понимаю, что происходит, я хотел бы понять, почему и если это хороший способ сделать?

Answer 1

Beacause Вы установили ng-required="true" на ваш входной тэг угловой, который не связывает пустое значение с вашей моделью тыс., Когда вы удаляете значение из ввода. Консоль показывает вам radios.code как неопределенный.

Пожалуйста, смотрите ниже рабочей демонстрации:

(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>