ユーザー入力値入力フィールドに基づいてNgRepeatを再レンダリングします

Question

div内にマークアップがあります。基本的に私は提出時にも保存したいいくつかのフォームフィールド。

このdivの外側には、ユーザーが整数を入力できる入力フィールドがあります。この整数に基づいて、項目を表示するか、または繰り返しています。

私の問題と一致するサンプルコードです。 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){ 
 
    \t $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. $scope.$apply() getNumber関数内で手動で変更を更新する必要があります。

どうすればいいですか？ ng-repeatを更新する方法はありますか？

Answer 1

それはあなたがtypetextのinputを使用している、ng-repeatの問題ではありません。 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>