Question

在angularJs中使用Javascript，我将以下代码：

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运行之后也会定义它，但是当我在输入中输入内容然后删除它时，我设法有了行为。

我不知道什么是hapening，我想了解为什么以及它是否是一个好方法？

Answer 1

由于您在输入标记上设置ng-required="true"，当您从输入中删除值时，angular会将空值绑定到您的模型，控制台会将您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>

ng-repeat中的ng-model变得不确定

1 个答案: