数値入力で数値を入力する

入力[数値]に数値を入力して入力しようとしています。数値入力で数値を入力する

これは

JSFiddle Demo

を働いているので、これは

// Code goes here 
 

 
var app = angular.module('app', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.lengInput = { 
 
     count: 0, 
 
     values: [], 
 
     fill: function(limit) { 
 
      var sequence = []; 
 
      for (var i = 0; i < limit; i++) { 
 
       sequence.push(i); 
 
      } 
 
      return sequence; 
 
     } 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js" data-semver="1.5.11"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    <input ng-model="lengInput.count" type="number" min="1" max="20"> 
 
    <ul> 
 
     <li ng-repeat="i in lengInput.fillSequence(lengInput.count)"> 
 
      <input ng-model="lengInput.values[i]" /> 
 
     </li> 
 
    </ul> 
 
    </body> 
 

 
</html>

動作しないのはなぜ私のミスを見つけてください。

出典

2017-09-15 BT101

代わりng-repeatに関数を直接取り付けるには、代わりにそれを実行すると、関数は毎回実行されないよう、$scope.lengInput.valuesをintializeと$scope.lengInput.countが設定取得された入力フィールドにng-changeを追加するためにng-initを使用することができます入力ボックスの値が変更されたときのみ！

// Code goes here 
 

 
var app = angular.module('app', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.lengInput = { 
 
    count: 0, 
 
    values: [], 
 
    fill: function(limit) { 
 
     var sequence = []; 
 
     for (var i = 0; i < limit; i++) { 
 
     sequence.push(i); 
 
     } 
 
     $scope.lengInput.values = sequence; 
 
    } 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 

 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js" data-semver="1.5.11"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl" ng-init="lengInput.fill(lengInput.count)"> 
 
    <p>Hello {{name}}!</p> 
 
    <input ng-model="lengInput.count" type="number" min="1" max="20" ng-change=" lengInput.fill(lengInput.count)"> 
 
    <ul> 
 
    <li ng-repeat="i in lengInput.values"> 
 
     <input ng-model="lengInput.values[i]" /> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

出典

2017-09-15 16:19:55

数値入力で数値を入力する

答えて

関連する問題