Wie aktiviert/deaktiviert Senden Schaltfläche basierend auf Kontrollkästchen?

Question

Ich möchte Senden-Button aktivieren, wenn ein oder mehrere Checkbox-Wert ausgewählt ist, habe ich versucht mit unten Code seine Aktivierungstaste, aber wenn ich einen Wert überprüfen, macht es alle Kontrollkästchen ausgewählt? Irgendeine Idee, was falsch umgesetzt wird?

main.html

<tr ng-repeat="user in userList track by $index"> 
      <td st-ratio="20">{{user.attuid}}</td> 
      <td st-ratio="30">{{user.firstName}} {{user.lastName}}</td> 
      <td st-ratio="20"><input type="checkbox" ng-model="userList.selected" ng-click="checkedValue(user)"> </td> 
     </tr> 

<button class="btn btn-primary" ng-disabled="user.selected" ng-disabled="!userList.selected" ng-click="addUsers()">Add User(s)</button> 

Ctrl.js

$scope.$on('show-user-list',function(e,data){ 
    $scope.userList = data; 
    $scope.userList.selected = false; 
    }); 


$scope.checkedValue = function(user) { 
user._id = user.attuid; 
user.type = 'user'; 
     if ($scope.selectedUsers.indexOf(user) === -1) { 
      $scope.selectedUsers.push(user); 
      $scope.userList.selected = true; 
     } else { 
      $scope.selectedUsers.splice($scope.selectedUsers.indexOf(user), 1); 
     } 
     console.log($scope.userList.selected); 
    }; 

Answer 1

Erstellen Sie eine einzelne Bereichsvariable, die mit ng-disabled ausgewertet werden soll. Etwas wie $ scope.userSelected. Aktualisieren Sie es basierend auf einem Benutzer ausgewählt/nicht ausgewählt.

-Controller

$scope.userSelected = false; 

$scope.checkedValue = function() { 
    $scope.userSelected = false; 
    angular.forEach($scope.userList, function(user) { 
    if (user.selected) { 
     $scope.userSelected = true; 
    } 
    }); 
}; 

HTML

<table> 
    <tr ng-repeat="user in userList track by $index"> 
    <td st-ratio="20">{{user.attuid}}</td> 
    <td st-ratio="30">{{user.firstName}} {{user.lastName}}</td> 
    <td st-ratio="20"> 
     <input type="checkbox" ng-model="user.selected" ng-click="checkedValue()"> </td> 
    </tr> 
</table> 
<button class="btn btn-primary" ng-disabled="!userSelected" ng-click="addUsers()">Add User(s)</button> 

Hier ist ein Arbeits plunk

Answer 2

Das Problem ist, dass Sie das Kontrollkästchen Wert ist ng-model="userList.selected", so dass alle Kontrollkästchen den gleichen Wert userList.selected daher alle ausgewählt werden, wenn Sie überprüfen einen von ihnen.

aktualisieren - (zu handhaben Sperren und Freigeben der adduser Taste)

Wie wäre es wir $scope.selectedUsers dann deaktivieren Taste auf der Grundlage seiner Länge ng-disabled="selectedUsers.length == 0"

Beispiel Snippet haben:

angular.module("myApp", []) 
 
    .controller("myCtrl", function($scope) { 
 
    $scope.userList = [{ 
 
     attuid: "1", 
 
     firstName: "abc", 
 
     lastName: "xyz", 
 
     selected: false 
 
    }, { 
 
     attuid: "2", 
 
     firstName: "abc", 
 
     lastName: "xyz", 
 
     selected: false 
 
    }]; 
 
    $scope.selectedUsers = []; 
 
    $scope.checkedValue = function(user) { 
 
     user._id = user.attuid; 
 
     user.type = 'user'; 
 
     if ($scope.selectedUsers.indexOf(user) === -1) { 
 
     $scope.selectedUsers.push(user); 
 
     $scope.userList.selected = true; 
 
     } else { 
 
     $scope.selectedUsers.splice($scope.selectedUsers.indexOf(user), 1); 
 
     } 
 
    }; 
 

 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    <table> 
 
    <tr ng-repeat="user in userList"> 
 
     <td st-ratio="20">{{user.attuid}}</td> 
 
     <td st-ratio="30">{{user.firstName}} {{user.lastName}}</td> 
 
     <td st-ratio="20"> 
 
     <input type="checkbox" ng-model="user.selected" ng-click="checkedValue(user)"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <button class="btn btn-primary" ng-disabled="selectedUsers.length == 0" ng-click="addUsers()">Add User(s)</button> 
 
</div>