CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directivescope
user4756836
user4756836

Reputation: 1337

disable button if none of the options are selected angularJS

I would like to disable the add button if none of the options in the list are selected or if the selected class is not there in the list.

HTML:

<div ng-repeat="json in myJson" ng-class="{'selected': json.selected}" ng-model="selectionOptions" ng-click="selectItem($index)">
  {{json.title}}
</div>
<button ng-disabled="hideAdd">Add</button>

I have tried:

 $scope.$watch('selectionOptions', function(val) {
    if(angular.element('selectionOptions').hasClass('selected')) {
        $scope.hideAdd = false;
    } else {
        $scope.hideAdd = true;
    }
  });

JSFiddle Demo

Upvotes: 1

Views: 958

Answers (2)

Jaydo
Jaydo

Reputation: 1859

No need for a directive or a $watch.

Remove the ng-model as it's doing nothing. Even if it did work every item would be bound to the same variable.

Use ng-click to call a function on $scope which toggles the selected value and adds/removes it from the list of selected options.

You can use ng-show="selectedOptions.length" to hide/show the add button.

angular.module('app', []).controller('mainCtrl', function($scope) {
  $scope.myJson = [{
    title: 'test1',
    selected: false
  }, {
    title: 'test2',
    selected: true
  }, {
    title: 'test3',
    selected: false
  }, {
    title: 'test4',
    selected: false
  }];

  // Initialize array with already selected options
  $scope.selectedOptions = $scope.myJson.filter(function(item) {
    return item.selected;
  });

  $scope.toggle = function(item) {
    // Toggle selected
    item.selected = !item.selected;

    // Add it to list
    if (item.selected) {
      $scope.selectedOptions.push(item);
    } else {
      // Remove it from list
      $scope.selectedOptions.splice($scope.selectedOptions.indexOf(item), 1);
    }
  };
});
.selected {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='mainCtrl'>
  <div app-click="">
    <div ng-repeat="json in myJson" ng-click="toggle(json)" ng-class="{'selected': json.selected}">
      {{json.title}}
    </div>
    <button ng-show="selectedOptions.length">Add</button>
  </div>

  <br/>Selected options: <pre>{{selectedOptions | json}}</pre>
</div>

Upvotes: 2

ndoes
ndoes

Reputation: 678

I don't think you can use ng-model here, since there is no input. You can watch the json or you can use a filter to determine if there are any selected elements. Example of the latter:

 .directive('appClick', function() {
  return {
    restrict: 'A',
    scope: true,
    controller: function($scope, $element) {
      optionIsSelected();

      function optionIsSelected() {
        $scope.hideAdd = $scope.myJson.filter(function(el) {
          return el.selected
        }).length === 0;
      }

      $scope.selectItem = function(index) {
        $scope.myJson[index].selected = !($scope.myJson[index].selected);
        optionIsSelected();
      };
    }
  }
}

Working fiddle

Upvotes: 1

Related Questions