I have an array that contains a bunch of objects. If there are no objects that contains a "true" value for the key "pleted", I would like to disable a button.

//Here is the format for the array of objects:

$scope.todos = [{
                task:$scope.task,
                pleted: false,
                localID:Date.now(),
                display: true
}];

//Here is the button I want to disable::

<button ng-click="clear()" class="btn" ng-disabled="">Clear Completed</button>

Any help is appreciated.

I have an array that contains a bunch of objects. If there are no objects that contains a "true" value for the key "pleted", I would like to disable a button.

//Here is the format for the array of objects:

$scope.todos = [{
                task:$scope.task,
                pleted: false,
                localID:Date.now(),
                display: true
}];

//Here is the button I want to disable::

<button ng-click="clear()" class="btn" ng-disabled="">Clear Completed</button>

Any help is appreciated.

• javascript
• angularjs
• angularjs-filter
• angularjs-ng-disabled

4 Answers 4

You could place filter over your todos object and check for there length.

Markup

<button ng-click="clear()" class="btn" ng-disabled="(todos | filter: {pleted:true}).length < 1">
     Clear Completed
</button>

Working Fiddle

You can check something like

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.todos = [{
    task: $scope.task,
    pleted: false,
    localID: Date.now(),
    display: true
  }];

  $scope.isDisabled = function() {
    return $scope.todos.some(function(item) {
      return item.display === true
    })
  }


})

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  <input type="checkbox" ng-model="todos[0].display" <br />
  <button ng-click="clear()" class="btn" ng-disabled="isDisabled()">Clear Completed</button>
</div>

ng-disabled="(todos | filter: {pleted:true}).length < 1"

you can try:

html:

<button ng-click="clear()" class="btn" ng-disabled="isDisabled()">Clear Completed</button>

in controller:

$scope.isDisabled = function () {
        var disabled = true;
        angular.forEach($scope.todos, function(todo){
            if(todo.pleted === true){
                disabled = false;
            }
        });
        return disabled;
    };