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

时间:2017-09-25 02:33:23

标签: javascript jquery angularjs

我正在尝试将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>

有人可以帮我解决这个问题,或者至少向我解释一下这个问题吗?

1 个答案:

答案 0 :(得分:1)

试试这个=&gt; 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>