将输入绑定到array.length时的RangeError

时间:2014-04-23 07:54:45

标签: angularjs

<div ng-app="">
<div ng-controller="MyCtrl">
    <input required type="number" ng-model="teams.length" min="1" max="9">    
    <span>pressing backspace to remove the number causes an exception</span>

    <div ng-repeat="team in teams track by $index">
        team {{$index+1}}
    </div>
</div>

    function MyCtrl($scope) {
    $scope.teams = [{}];
}

在输入中按退格键会导致异常:

RangeError: Invalid array length
at setter (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:9982:12)
at token.fn.extend.assign (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:9429:18)
at $setViewValue (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:16390:7)
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:15654:14
at Scope.$eval (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:11576:28)
at Scope.$apply (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:11676:23)
at HTMLInputElement.listener (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:15653:13)
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:2562:10
at Array.forEach (native)
at forEach (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:300:11) 

我想要发生的是输入验证失败(ng-invalid)。 我正在跑角1.2.16

JSFiddle

1 个答案:

答案 0 :(得分:5)

不要直接绑定teams.length;而是创建一个新变量,比如length,然后绑定到它。然后$watch然后将更改应用到teams.length,如果适用的话。输入ng-required="true"。:

<input ng-required="true" type="number" ng-model="length" min="1" max="9" />

function MyCtrl($scope) {
    $scope.teams = [{}];
    $scope.length = $scope.teams.length;

    $scope.$watch("length", function(newlength) {
        if( newlength ) {
            $scope.teams.length = newlength;
        }
    });
}

小提琴:http://jsfiddle.net/6pcVN/