2017-09-15 1 views
0

Ich versuche, die Eingabe durch Eingabe der Zahl in Eingabe [Nummer] zu füllen. Füllen Sie die Eingänge mit der Nummer angularjs

Warum dies nicht

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

da dies funktioniert arbeiten

JSFiddle Demo

Bitte meinen Fehler finden.

Antwort

1

Statt die Funktion direkt an die ng-repeat das Anbringen, können Sie ng-init verwenden, um die $scope.lengInput.values und füge ein ng-change das Eingabefeld intialize wo $scope.lengInput.count gesetzt zu werden, so dass die Funktion nicht jedes Mal laufen bekommt, sondern es läuft nur wenn der Wert im Eingabefeld sich geändert hat!

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

Verwandte Themen