Re-render NgRepeat based on user typed value input field

Question

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

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.

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>

here's what I tried :

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

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

ram1993 · Accepted Answer · 2016-10-23T12:05:49.140

2

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

edited Oct 23 '16 at 12:05

answered Oct 23 '16 at 11:58

ram1993

979
1
9
13

Indeed ! How do I failed to perform that test ? I hate myself. Thanks – HalfWebDev Oct 23 '16 at 12:01
Maybe you can remove your comments here: http://stackoverflow.com/questions/16824853/way-to-ng-repeat-defined-number-of-times-instead-of-repeating-over-array/16824944?noredirect=1#comment67669719_16824944 – Dan Nov 06 '16 at 21:37

whyyie · Answer 2 · 2016-10-23T12:01:38.900

You do not need to use ng-blur, $watch, $scope.$apply() for detecting the changes in your case.

You got this part wrong: <input type="text" ng-model="myNumber">, in which you should change the input to type number.
new Array() accept number and you pass text over it.

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>

I watched your all edits and earlier you pushed into array to make it work. You changed your solution seeing ram1993's. Not cool. Thanks for the effort though. — HalfWebDev, Oct 23 '16 at 12:05

Re-render NgRepeat based on user typed value input field

2 Answers2

Linked