为什么ng-maxlength将我的有效输入设置为undefined？

Question

我想将maxlength验证添加到我的表单字段，但是当我添加它时，它表示任何长度都是无效的，并始终将我的$ scope变量设置为'undefined'。

看看这里：http://jsfiddle.net/stevenr4/41L26apv/

的Javascript：

var myApp = angular.module('myApp',[]); 

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope) { 
    $scope.name = 'Superhero'; 
    $scope.data = { 
     'person1': { 
      'firstname': "Steve", 
      'lastname': "Rogers", 
      'maxlength': 5 
     }, 
     'person2': { 
      'firstname': "Bob", 
      'lastname': "Ross", 
      'maxlength': 10 
     } 
    }; 

    $scope.pkeys = ['person1', 'person2']; 

    $scope.log = function() { 
     console.log($scope.data); 
    } 
} 

HTML：

<div ng-controller="MyCtrl"> 
    Hello, {{name}}!<br> 
    Sir, {{data.person1.firstname}} {{data.person1.lastname}}!<br> 
    and, {{data.person2.firstname}} {{data.person2.lastname}}!<br> 

    <div ng-repeat="key in pkeys track by $index"> 
    {{key}}<br> 
    <input type="text" ng-model="data[key].firstname" ng-maxlength="data[key].maxlength"><br> 
    <input type="text" ng-model="data[key].lastname" ng-maxlength="data[key].maxlength"><br> 
    </div> 

    <button ng-click="log()"> 
    Log the data 
    </button> 
</div> 

有人可以帮我解决这个问题，或者至少给我讲解一下？

Answer 1

试试这个=> NG-MAXLENGTH = “{{..}}”

<div ng-controller="MyCtrl"> 
    Hello, {{name}}!<br> 
    Sir, {{data.person1.firstname}} {{data.person1.lastname}}!<br> 
    and, {{data.person2.firstname}} {{data.person2.lastname}}!<br> 

    <div ng-repeat="key in pkeys track by $index"> 
    {{key}}<br> 
    <input type="text" ng-model="data[key].firstname" ng-maxlength="{{data[key].maxlength}}"><br> 
    <input type="text" ng-model="data[key].lastname" ng-maxlength="{{data[key].maxlength}}"><br> 
    </div> 

    <button ng-click="log()"> 
    Log the data 
    </button> 
</div>