Angular - Enable button only if object inside an array contains completed:true

Question

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

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

$scope.todos = [{
                task:$scope.task,
                completed: 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.

Pankaj Parkar · Accepted Answer · 2019-08-01T08:22:49.977

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: {completed:true}).length < 1">
     Clear Completed
</button>

Working Fiddle

edited Aug 01 '19 at 08:22

answered Aug 21 '15 at 06:42

Pankaj Parkar

134,766
23
234
299

much better than my solution .... but need to get it to work http://jsfiddle.net/arunpjohny/cp1ttr8t/5/ – Arun P Johny Aug 21 '15 at 06:45
give me a one minute...i will figure it out – Pankaj Parkar Aug 21 '15 at 06:47
I have this: but it is only working when everything is checked: ng-disabled="(todos | filter: !{completed:false}).length > 0" – Aug 21 '15 at 06:55
Why you added `!` in the filter `ng-disabled="(todos | filter: {completed:false}).length > 0"` to check any of the uncheck.. – Pankaj Parkar Aug 21 '15 at 06:56
I want the button to be disabled by default, and only show if at least one item is checked. – Aug 21 '15 at 07:26
@Triode that is contradict to you title headline,,please update that..i'll update my answer – Pankaj Parkar Aug 21 '15 at 07:29
I think I got it: ng-disabled="(todos | filter: {completed:true}).length < 1" – Aug 21 '15 at 07:42
@Triode sorry I didn't able to get a time to update answer..Now I did that..Thanks :) you could accept it..if you want. – Pankaj Parkar Aug 21 '15 at 08:44

score 3 · Answer 2 · answered Aug 21 '15 at 06:42

You can check something like

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

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

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


})

<script src="https://ajax.googleapis.com/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>

score 1 · Answer 3 · answered Aug 21 '15 at 07:44

1

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

answered Aug 21 '15 at 07:44

score 0 · Answer 4 · answered Aug 21 '15 at 07:11

0

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.completed === true){
                disabled = false;
            }
        });
        return disabled;
    };

answered Aug 21 '15 at 07:11

Shaishab Roy

16,335
7
50
68

Working code in PLUNKER : http://plnkr.co/edit/xN9cE5wdywv7BTu6Gt2K?p=preview – Shaishab Roy Aug 21 '15 at 07:23

Angular - Enable button only if object inside an array contains completed:true

4 Answers4