Angularjs - 输入的动态名称

Question

My problem should be quite simple. I have an input inside a ng-repeat where the name is inserted dynamically and then I want to validate the input from the form using:

{{myForm.{{entry.dynamicField}}.$invalid}} //ERROR Token '{' is not a valid identifier

 <form name="myForm"> <tr ng-repeat="entry in array"> <td> <input name="{{entry.dynamicName}}" /> <span ng-show="myForm.{{entry.dynamicName}}.$invalid">Invalid</span> </td> </tr> </form>

Any help?

Answer 1

You will have to use ng-model in order to bind your dynamic data into the input element. And, get rid of angular expression in ng-show .

This should be changed

ng-show="myForm.{{entry.dynamicName}}.$invalid"

to

ng-show="myForm.entry.dynamicName.$invalid"

Snippet

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.array = [{ dynamicName: "John Doe" }, { dynamicName: "John Doe2" }]; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <form name="myForm"> <table> <tr ng-repeat="entry in array"> <td> <input name="entry.dynamicName" ng-model="entry.dynamicName" /> <span ng-show="myForm.entry.dynamicName.$invalid">Invalid</span> </td> </tr> </table> </form> </div>

Answer 2

Pretty same as in JS:

{{myForm[entry.dynamicField].$invalid}}

And just remember - you always use {{}} only once for expression.