我可以限制添加到数组中的项目数量吗？答案

【问题标题】：Can I cap the amount of items I add to an array?我可以限制添加到数组中的项目数量吗？
【发布时间】：2015-03-25 15:53:15
【问题描述】：

我的应用程序正在使用文本输入将项目添加到数组中。我想说，一旦这个数组有 = 到 50 个项目，然后禁用搜索输入。我使用“清除已完成”按钮来清除已选中的任务（项目）。因此，重新启用输入的唯一方法是清除某些项目。

我正在使用 Angular.JS，我假设我需要一个 for 循环来说明某些内容，如果 items = 50，则禁用文本输入，否则启用输入。

我就是不知道怎么写……

角度数组

 $scope.todos = [
    {text:'Build this ToDo List', done:true},         
    {text: 'Test this ToDo list', done:false}
    //tasks added through text input...
  ];

应用的 HTML：

<div class="todo-wrapper" ng-controller="TodoCtrl">
      <form>
        <input class="add-input" placeholder="Add a new task..." type="text" ng-model="formTodoText" ng-model-instant/>
        <button class="add-btn" ng-click="addTodo()"><h2>+</h2></button>
      </form>
      <div class="max-window">
        <ul>
          <li class="tasks" ng-repeat="todo in todos">
            <label class="label--checkbox">
              <input class="checks" type="checkbox" ng-model="todo.done" checked/>
              <span class="done-{{todo.done}}">{{todo.text}}</span>
            </label>
          </li>
        </ul>
      </div>
      <button class="clear-btn" ng-click="clearCompleted()">Clear completed</button>
    </div>

角度函数

将项目添加到数组

$scope.addTodo = function () {
    $scope.todos.push({text:$scope.formTodoText, done:false});
    $scope.formTodoText = '';
  };

从数组中清除已完成的任务（项目）

$scope.clearCompleted = function () {
        $scope.todos = _.filter($scope.todos, function(todo){
            return !todo.done;
        });

If/Else 语句？

if ($scope.todos = 50) {
    document.getElementsByClassName('add-input').disabled = true;
    document.getElementsByClassName('add-btn').disabled = true;
} else {
    document.getElementsByClassName('add-input').disabled = false;
    document.getElementsByClassName('add-btn').disabled = false;
}

或者，如果我可以禁用add-btn 和enter to submit，这也可以解决我的问题。这可能吗？

感谢您的帮助！

编辑

使用ng-disabled解决了问题

输入

<input class="add-input" placeholder="Add a new task..." type="text" ng-model="formTodoText" ng-model-instant ng-disabled="todos.length >= 4"/>

按钮

<button class="add-btn" ng-click="addTodo()"ng-disabled="todos.length >= 4"><h2>+</h2></button>

【问题讨论】：

标签： javascript jquery arrays angularjs input

【解决方案1】：

在您的输入中添加 ng-disabled 指令：

<input class="add-input" placeholder="Add a new task..." type="text" ng-model="formTodoText" ng-model-instant ng-disabled="todos.length >= 50"/>

ng-disabled 中的表达式是一个布尔值，当为 true 时将禁用输入，当为 false 时启用它。

【讨论】：

我想禁用它，只有在一定数量的条目之后，您似乎是在告诉我从一开始就禁用它？
不，当 todos.length 属性在你的控制器范围内被修改时，它的值将反映在 DOM 上。
抱歉，我没有意识到代码框可以向左滚动。这就是我为我工作的：Input <input class="add-input" placeholder="Add a new task..." type="text" ng-model="formTodoText" ng-model-instant ng-disabled="todos.length >= 4"/> 和 Button <button class="add-btn" ng-click="addTodo()"ng-disabled="todos.length >= 4"><h2>+</h2></button> 谢谢你的帮助！

【解决方案2】：

你可以使用数组的length属性。

length 属性表示一个无符号的 32 位整数，用于指定数组中的元素个数

代码

if($scope.todos.length == 50)

你也可以使用ngDisabled指令

如果ngDisabled 中的expression 计算结果为truthy，则此指令设置元素的禁用属性。

<button ng-disabled="todos.length == 50" ng-click="addTodo()"><h2>+</h2></button>

【讨论】：