NG-모델

Question

는 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

입력 한 값에서 ng-required="true"을 설정하면 입력 값에서 값을 삭제할 때 공백 값을 모델 thous에 바인드하지 않습니다. 콘솔에 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>