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

Posted 2023-03-05

【中文标题】根据用户输入的值输入字段重新渲染 NgRepeat

【英文标题】：Re-render NgRepeat based on user typed value input field

【发布时间】：2017-03-05 06:39:09

【问题描述】：

我有 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>

这是我尝试过的：

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

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

【参考方案1】：

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

【讨论】：

确实！我如何未能执行该测试？我恨我自己。谢谢

也许你可以在这里删除你的 cmets：***.com/questions/16824853/…

【参考方案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>

【讨论】：

我看了你所有的编辑，早些时候你推入数组以使其工作。您更改了看到 ram1993 的解决方案。不酷。不过感谢您的努力。