2017-09-15 4 views
0

입력 [숫자]에 숫자를 입력하여 입력을 채우려고합니다. 문제는이 이후숫자로 입력 입력하기 anglejs

// 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>

를 작동하지 않는 이유는

JSFiddle Demo

내 실수를 찾아주세요 노력하고 있습니다.

답변

1

대신 ng-repeat에 함수를 직접 연결, 당신은 대신 실행, 함수마다 실행하지 않습니다 있도록 $scope.lengInput.values을 초기화하기와 $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>