根据用户输入的值输入字段重新渲染 NgRepeat

Question

我有 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. 观察变量并将输入的 newValue 分配给范围变量并没有帮助。
2. 我尝试使用 ng-blur 调用具有更新值的相同函数。哦，是的，ng-change 也试过了。
3. 出于绝望，在 getNumber 函数中使用 $scope.$apply() 手动更新更改。

我该如何进行呢？有什么方法可以更新 ng-repeat 吗？

Answer 1

不是ng-repeat的问题，你用过input的typetext。 将其更改为number 或使用parseInt。

Answer 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>