Question

我的应用程序正在使用文本输入将项目添加到数组中。我想能够说，一旦这个数组有= 50个项目，然后禁用搜索输入。我使用了＃34; clear completed＆＃34;按钮以清除已签出的任务（项目）。因此，重新启用输入的唯一方法是清除一些项目。

我正在使用Angular.JS，我假设我需要一个循环来说明行，如果items = 50，则禁用text-input，否则启用输入。

我只是不知道怎么写它......

角度阵列

 $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 Statement？

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>

Answer 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时启用它。

Answer 2

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

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

代码的

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

您也可以使用ngDisabled指令

如果expression内的ngDisabled评估为truthy，则此指令会在元素上设置disabled属性。

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

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

2 个答案: