Почему мой список не отображается?

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 является строкой, так как тип ввода является текст. Измените его на номер, и все будет работать. Работа plunker: http://jsfiddle.net/yv0z9q8L/

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

Также обратите внимание, что вам не нужно onchange атрибут вообще здесь, однако я не уверен, является ли это хорошая вещь. Использование функции in для 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));