Deaktivieren Sie die Schaltfläche, wenn Kontrollkästchen in eckigen JS deaktiviert ist

Question

Also arbeite ich an dieser Webanwendung. Ich habe eine Liste von Kategorien, in denen, wenn ein Element in der Liste nicht markiert ist, die Schaltflächen "Speichern" und "Veröffentlichen" deaktiviert sind. Ich verstehe, ng-disabled = !(ng-model name) würde genau das tun, aber jedes Mal lade ich die Seite, die Schaltflächen sind deaktiviert, aber nicht aktiviert, wenn ich ein Element auf der Liste überprüfen.

<a ng-if="status() < 2" href="#" data-ng-click="publish(true)" class="btn btn-sm btn-block btn-success" ng-disabled="!cat.IsSelected">{{lbl.publish}}</a> 
<a ng-if="status() == 2" href="#" data-ng-click="save()" class="btn btn-sm btn-block btn-primary" id="check_box" ng-disabled="!cat.IsSelected"> 
{{lbl.save}} 
</a>      
<span ng-if="status() < 2"> 
    <a href="#" ng-click="save()" class="btn btn-sm btn-block btn-primary" id="check_box" ng-disabled="!cat.IsSelected"> 
    {{lbl.save}} 
    </a> 
</span> 

<ul class="categories-list"> 
    <li ng-repeat="cat in lookups.CategoryList"> 
     <label><input type="checkbox" id="cat-{{cat.OptionValue}}" data-ng-model="cat.IsSelected"/> {{cat.OptionName}}</label> 
    </li> 
    <li ng-if="lookups.CategoryList.length == 0" class="item-empty">{{lbl.empty}}</li> 
</ul> 

JS-Code:

$scope.post.Categories = []; 
if ($scope.lookups.CategoryList != null) { 
    for (var i = 0; i < $scope.lookups.CategoryList.length; i++) { 
     var cat = $scope.lookups.CategoryList[i]; 
     if (cat.IsSelected) { 
      var catAdd = { "IsChecked": false, "Id": cat.OptionValue, "Title": cat.OptionName }; 
      $scope.post.Categories.push(catAdd); 
     } 
    } 
} 

Answer 1

UPDATE: machte die Geige eher wie das eigentliche Szenario.

Wickeln Sie Ihre <a> Tag in eine Schaltfläche und setzen Sie die ng-dissabled auf diese.

Hier ist ein jsfiddle das demonstriert, wie ich dies tun würde: fiddle

<div ng-app="test" ng-controller="myController"> 
    <button ng-click="save()" ng-disabled="!hasSelectedAnItem" class="btn btn-sm btn-block btn-primary"> 
    Save 
    </button> 
    <ul class="categories-list"> 
     <li ng-repeat="cat in items"> 
      <label><input type="checkbox" id="cat-{{cat.OptionValue}}" ng-model="cat.IsSelected" ng-change="canBeSaved()"/> {{cat.OptionName}}</label> 
     </li> 
    </ul> 
</div> 

JS:

angular.module('test', []) 

.controller('myController', ['$scope', function($scope) { 
    $scope.hasSelectedAnItem = false; 

    $scope.items = [ 
     {OptionValue: 123, OptionName: "Adam", IsSelected: true}, 
     {OptionValue: 234, OptionName: "Paul", IsSelected: false}, 
      {OptionValue: 345, OptionName: "Jason", IsSelected: true},   
     {OptionValue: 464, OptionName: "Joe", IsSelected: false} 
    ]; 

    $scope.canBeSaved = function() { 

     var found = false; 
     $scope.items.forEach(function(item) { 
     if (item.IsSelected) { 
      alert("Here"); 
      found = true; 
     } 
     }); 

     $scope.hasSelectedAnItem = found; 
    } 

    $scope.save = function() { 
     alert($scope.cat.IsSelected); 
    } 

    $scope.canBeSaved(); 
}]);