[AngularJS]为什么我的列表不呈现?

发布时间: 2017/4/16 21:03:56
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

通过使用默认显示 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/

解决方法 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;
});

呆瓜︰ http://jsfiddle.net/m1zq3zqv/1/

赞助商