Повторное рендеринг NgRepeat на основе введенного пользователем поля ввода значения

У меня есть div, который имеет некоторую разметку внутри него. В основном некоторые поля формы, которые я хочу сохранить также при подаче.

За пределами этого div у меня есть поле ввода, где пользователь может ввести целое число. На основе этого целого числа я хотел бы показать или ng-repeat элементы.

Вот пример кода, соответствующий моей проблеме. Удерживал диапазон внутри любых элементов формы, чтобы сосредоточиться на основной проблеме ng-repeat.

var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
    $scope.myNumber = 3;

    $scope.getNumber = function(num) {
        return new Array(num);   
        $scope.$apply();
    }
    
    $scope.$watch('myNumber', function(newVal,OldVal){
    	$scope.myNumber = newVal;
      //alert(newVal);
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
    <div ng-controller="ctrlParent">
    <input type="text" ng-model="myNumber" ng-blur="getNumber(myNumber)"/>
        <ul>
            <li ng-repeat="i in getNumber(myNumber) track by $index">
              
              <span>{{$index+1}}</span>
            </li>
        </ul>
        
       
    </div>
</div>

ОТВЕТЫ

Ответ 1

Это не проблема ng-repeat, вы использовали input для type text. Измените его на number или используйте parseInt.

Ответ 2

Вам не нужно использовать ng-blur, $watch, $scope.$apply() для обнаружения изменений в вашем случае.

Вы ошиблись в этой части: <input type="text" ng-model="myNumber">, в которой вы должны изменить ввод на номер типа.
new Array() принять номер и передать текст над ним.

var app = angular.module('myapp', []);
 app.controller('ctrlParent', function($scope) {
   $scope.myNumber = 3;

   $scope.getNumber = function(num) {
     return new Array(num);
   }
 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="ctrlParent">
    <input type="number" ng-model="myNumber" />
    <ul>
      <li ng-repeat="i in getNumber(myNumber) track by $index">
        <span>{{$index+1}}</span>
      </li>
    </ul>
  </div>
</div>