AngularJS bilden Eingangsname Validierung nicht in ngrepeat Arbeits

Question

name="number-{{$index+1}}" in ng-repeat zugleich Arbeits myform.number-{{$index+1}}.$invalid nicht für das Formular Arbeits

Demo: http://plnkr.co/edit/Z3EmpHu8w2iZcZko9dJv?p=preview

var app = angular.module('plunker', []); 
 
app.controller('MainCtrl', function($scope) { 
 
    $scope.choices = [{no: '1234567890'}, {no: '0987654321'}]; 
 
    $scope.numberAdd = function() { 
 
    $scope.choices.push({'no':''}); 
 
    }; 
 
    $scope.numberRemove = function(item) { 
 
    $scope.choices.splice(item, 1); 
 
    }; 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
<script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
 
<div class="container" ng-app="plunker" ng-controller="MainCtrl"> 
 
    <form name="myform" class="form-inline"> 
 
    <br> 
 
    <div class="form-group" ng-repeat="choice in choices"> 
 
     <div class="input-group"> 
 
     <input type="text" class="form-control" ng-model="choice.no" name="number-{{$index+1}}" placeholder="Mobile number {{$index+1}}" required> 
 
     <div class="input-group-addon" ng-if="!$last" ng-click="numberRemove(choice)"><span class="glyphicon glyphicon-minus"></span> 
 
     </div> 
 
     <div class="input-group-addon" ng-if="$last" ng-click="numberAdd()"><span class="glyphicon glyphicon-plus"></span> 
 
     </div> 
 
     </div> 
 
     <span class="text-danger" ng-show="myform.number-{{$index+1}}.$invalid">Field required</span> 
 
    </div> 
 
    </form> 
 
    <br> 
 
    <pre>{{choices | json}}</pre> 
 
</div>

Answer 1

ng-show ein akzeptiert expression. Man könnte es so schreiben:

<span class="text-danger" ng-show="myform['number-' + ($index + 1)].$invalid">Field required</span> 

aktualisiert Demo here.

Answer 2

Ich fügte "track by $ index" zu Ihrem ng-repeat hinzu, um Elemente eindeutig zu machen, und bewegte das Formularelement in div mit ng-repeat unter Verwendung von ng-repeat. Es sind keine Controller-Änderungen erforderlich.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
<script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
<div class="container" ng-app="plunker" ng-controller="MainCtrl"> 
    <div class="form-inline" ng-repeat="choice in choices track by $index" ng-form="myform"> 
    <div class="form-group"> 
     <div class="input-group"> 
      <input type="text" class="form-control" ng-model="choice.no" name="number" placeholder="Mobile number {{$index+1}}" required> 
      <div class="input-group-addon" ng-if="!$last" ng-click="numberRemove(choice)"><span class="glyphicon glyphicon-minus"></span> 
      </div> 
      <div class="input-group-addon" ng-if="$last" ng-click="numberAdd()"><span class="glyphicon glyphicon-plus"></span> 
      </div> 
      </div> 
      <span class="text-danger" ng-show="myform.number.$invalid">Field required</span> 
     </div> 
     </div> 
    <br> 
    <pre>{{choices | json}}</pre> 
</div>