按数字填充输入 angularjs

Question

我正在尝试通过在 input[number] 中输入数字来填充输入。

为什么这不起作用

// 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="angular.js@1.5.x" 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

请指出我的错误。

Answer 1

您可以使用 ng-init 初始化 $scope.lengInput.values 并在 ng-change 的输入字段中添加 ng-change，而不是直接将函数附加到 ng-repeat 16=] 正在设置，因此函数不会每次都获得运行，而是仅当输入框中的值发生变化时才运行！

// 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="angular.js@1.5.x" 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>

按数字填充输入 angularjs

Populate inputs by number angularjs

angularjs

angularjs-ng-repeat