チェックボックスに基づいて送信ボタンを有効/無効にする方法は？

Question

1つ以上のチェックボックスの値が選択されているときにサブミットボタンを有効にしたい場合は、下のコードでその有効化ボタンを試してみましたが、何が間違って実装されているか？

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

ng-disabledで評価する単一スコープ変数を作成します。 $ scope.userSelectedのようなものです。ユーザーが選択/選択解除されたことに基づいて更新します。

<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> 

コントローラ

$scope.userSelected = false; 

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

HTMLはここで働いてplunk

Answer 2

問題は、チェックボックスの値がng-model="userList.selected"あるので、すべてのチェックボックスが同じ値userList.selectedを持っているので、すべての時に選択してしまうことがありますあなたはそれらの1つをチェックします。

更新 - （無効とはadduserボタンの有効化を処理するために）

我々は$scope.selectedUsers、その長さng-disabled="selectedUsers.length == 0"

例スニペットに基づいてボタンを無効にしている方法について：

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>