根据用户键入的值输入字段重新渲染NgRepeat [英] Re-render NgRepeat based on user typed value input field

问题描述

我有div，里面有一些标记.基本上，我也想在提交时保存一些表单字段.

I have div which has some markup inside it. Basically some form fields which I want to save too on submission.

在这个div之外，我有一个输入字段，用户可以在其中输入整数.基于这个整数，我想显示或ng-repeat项目.

Outside this div, I have an input field where user can type an integer. Based on this integer, I would like to show or ng-repeat items.

这是与我的问题匹配的示例代码.保留所有表单元素的跨度，以专注于ng-repeat的主要问题.

Here's the sample code matching my problem. Kept a span inside of any form elements to focus on main issue of 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()来手动更新更改.

1. Watching the variables and assigning newValue of input to scope variable does not help.
2. I tried using ng-blur to call the same function with updated value. Oh yes, ng-change was tried too.
3. Used $scope.$apply() inside getNumber function out of desperation to manually update the changes.

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

How do I proceed with it ? Is there any way to update the ng-repeat?

推荐答案

这不是 ng-repeat 的问题，您已使用类型的 input text .将其更改为 number 或使用 parseInt .

It is not an issue of ng-repeat, you have used input of type text. Change it to number or use parseInt.

这篇关于根据用户键入的值输入字段重新渲染NgRepeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！