Can I cap the amount of items I add to an array?

Question

I have my app that is using a text input to add items to an array. I would like to be able to say, once this array has = to 50 items, then disable the search input. I use a "clear completed" button to clear tasks(items) that are checked off. So the only way to re-enable the input would be to clear some items.

I am using Angular.JS, I'm assuming I would need a for loop that says something along the lines, if items = 50, then disable text-input, else enable input.

I just don't know how to go about writing it...

Angular Array

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

HTML of the app:

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

Angular Functions

Add item to array

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

Clear completed tasks(items) from array

$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;
}

Alternatively, if I could just disable the add-btn and enter to submit this could solve my problem as well. Is this possible?

Thanks for the help!

EDIT

Problem was solved by using ng-disabled

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>

Answer 1

Add the ng-disabled directive on your input :

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

The expression in ng-disabled is a boolean and will disable the input when true, enable it when false.

Answer 2

You can use length property of array.

The length property represents an unsigned, 32-bit integer that specifies the number of elements in an array

Code

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

---

You can also use ngDisabled directive

This directive sets the disabled attribute on the element if the expression inside ngDisabled evaluates to truthy .

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