Question

默认显示10 elements，但是当我更改输入时它不会更新，下面是代码和小提琴。

JS代码：

var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
    $scope.listItems = 10;
    $scope.newTotal = function(){
        $scope.$apply(function(){$scope.lisItemsTotal})
    }
    $scope.lisItemsTotal = function(num) {
        return new Array($scope.listItems);   
    }
});

http://jsfiddle.net/0dwmqn8y/1/

Answer 1

原因是更改输入后$scope.listItems是一个字符串，因为输入类型是文本。将其更改为数字，一切都会有效。工作人员：http://jsfiddle.net/yv0z9q8L/

<input type="number" name="red" ng-model="listItems" onchange="angular.element(this).scope().newTotal()">

另请注意，此处您根本不需要onchange属性，但我不确定这是否是一件好事。除非你知道自己在做什么，否则在ng-repeat中使用函数是非常危险的，因为在每个摘要周期中都会调用此函数。如果您计划循环遍历大量数据，那么它将严重影响您的性能。

就个人而言，我宁愿选择：

<div ng-app="myapp">
  <div ng-controller="ctrlParent">
    <input type="number" name="red" ng-model="itemCount">
    <ul>
      <li ng-repeat="i in items track by $index"><span>{{$index+1}}</span></li>
    </ul>               
  </div>
</div>

var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
  $scope.$watch('itemCount', function(val) {
    $scope.items = Array.new(val)
  });
  $scope.itemCount = 10;
});

plunker：http://jsfiddle.net/m1zq3zqv/1/

Answer 2

您从输入字段获得的数据是一个字符串，因此您可以通过更改以下行将输入类型更改为数字或在代码中应用一些解析

return new Array($scope.listItems);

到此：

return new Array(parseInt($scope.listItems));

为什么我的列表没有渲染？

2 个答案: