web-dev-qa-db-ja.com

Angularでチェックボックスがチェックされているかどうかを確認する方法

表示されたチェックボックスのいずれかがチェックされているかどうかをチェックする関数またはng-somethingはありますか？

ng-click = "function（）"を介して値を取得し、値を渡します。値が入っている場合、徒歩で配列を確認できます。

チェックボックスがチェックされている場合、「次へ」ボタンを有効/無効にします。

最も簡単な方法は何ですか？

angularjscheckbox
30
Bastian Gruber

次のようなことができます：

function ChckbxsCtrl($scope, $filter) {
    $scope.chkbxs = [{
        label: "Led Zeppelin",
        val: false
    }, {
        label: "Electric Light Orchestra",
        val: false
    }, {
        label: "Mark Almond",
        val: false
    }];

    $scope.$watch("chkbxs", function(n, o) {
        var trues = $filter("filter")(n, {
            val: true
        });
        $scope.flag = trues.length;
    }, true);
}

そしてテンプレート：

<div ng-controller="ChckbxsCtrl">
    <div ng-repeat="chk in chkbxs">
        <input type="checkbox" ng-model="chk.val" />
        <label>{{chk.label}}</label>
    </div>
    <div ng-show="flag">I'm ON when band choosed</div>
</div>

作業中： http://jsfiddle.net/cherniv/JBwmA/

UPDATE：または、次のような$scopeの$watch()メソッドを使用せずに、少し異なる方法で移動できます。

$scope.bandChoosed = function() {
    var trues = $filter("filter")($scope.chkbxs, {
        val: true
    });
    return trues.length;
}

そして、テンプレートで：

<div ng-show="bandChoosed()">I'm ON when band choosed</div>

フィドル： http://jsfiddle.net/uzs4sgnp/

24
Cherniv

ウォッチャーを使用したくない場合は、次のようなことができます。

<input type='checkbox' ng-init='checkStatus=false' ng-model='checkStatus' ng-click='doIfChecked(checkStatus)'>
25
TOBlender

チェックボックスが1つしかない場合、ng-modelだけで簡単にこれを行うことができます。

<input type="checkbox" ng-model="checked"/>
<button ng-disabled="!checked"> Next </button>

コントローラで$ scope.checkedを初期化します（デフォルト= false）。 official doc は、その場合のng-initの使用を推奨しません。

24
antoine

モデルと、チェックボックスがオンの場合にそのモデルに何が起こるかを考えてみてください。

各チェックボックスがng-modelでモデルのフィールドにバインドされていると仮定すると、チェックボックスがクリックされるたびにモデルのプロパティが変更されます。

<input type='checkbox' ng-model='fooSelected' />
<input type='checkbox' ng-model='baaSelected' />

そしてコントローラーで：

$scope.fooSelected = false;
$scope.baaSelected = false;

次のボタンは特定の状況でのみ使用できるようにする必要があるため、ng-disabledディレクティブをボタンに追加します。

<button type='button' ng-disabled='nextButtonDisabled'></button>

次のボタンは、fooSelectedがtrueまたはbaaSelectedがtrueの場合にのみ使用可能になり、次のボタンが使用可能かどうかを確認するためにこれらのフィールドの変更を監視する必要があります。

$scope.$watch('[fooSelected,baaSelected]', function(){
    $scope.nextButtonDisabled = !$scope.fooSelected && !scope.baaSelected;
}, true );

上記では、次のボタンの可用性に影響するチェックボックスは数個しかないと想定していますが、より多くのチェックボックスで動作するように簡単に変更でき、$ watchCollectionを使用して変更を確認できます。

8
Gruff Bunny

これも挿入コードの再投稿です。この例には以下が含まれます。-1つのオブジェクトリスト-各オブジェクトには子リストがありません。例：

var list1 = {
    name: "Role A",
    name_selected: false,
    subs: [{
      sub: "Read",
      id: 1,
      selected: false
    }, {
      sub: "Write",
      id: 2,
      selected: false
    }, {
      sub: "Update",
      id: 3,
      selected: false
    }],
  };

上記のように3つのリストを作成し、1つのオブジェクトリストに追加します

newArr.Push(list1);
  newArr.Push(list2);
  newArr.Push(list3);

次に、複数のグループでチェックボックスを表示する方法を実行します。

$scope.toggleAll = function(item) {
    var toogleStatus = !item.name_selected;
    console.log(toogleStatus);
    angular.forEach(item, function() {
      angular.forEach(item.subs, function(sub) {
        sub.selected = toogleStatus;
      });
    });
  };

  $scope.optionToggled = function(item, subs) {
    item.name_selected = subs.every(function(itm) {
      return itm.selected;
    })
    $scope.txtRet = item.name_selected;
  }

HTML：

<li ng-repeat="item in itemDisplayed" class="ng-scope has-pretty-child">
      <div>
        <ul>
          <input type="checkbox" class="checkall" ng-model="item.name_selected" ng-click="toggleAll(item)"><span>{{item.name}}</span>
          <div>
            <li ng-repeat="sub in item.subs" class="ng-scope has-pretty-child">
              <input type="checkbox" kv-pretty-check="" ng-model="sub.selected" ng-change="optionToggled(item,item.subs)"><span>{{sub.sub}}</span>
            </li>
          </div>
        </ul>
      </div>
      <span>{{txtRet}}</span>
    </li>

フィドル： 例

1
Sinh Nguyễn Đức

サブノード3リストを持つ複数のデータのサンプルがあり、各リストには属性と子属性があります。

var list1 = {
    name: "Role A",
    name_selected: false,
    subs: [{
        sub: "Read",
        id: 1,
        selected: false
    }, {
        sub: "Write",
        id: 2,
        selected: false
    }, {
        sub: "Update",
        id: 3,
        selected: false
    }],
};
var list2 = {
    name: "Role B",
    name_selected: false,
    subs: [{
        sub: "Read",
        id: 1,
        selected: false
    }, {
        sub: "Write",
        id: 2,
        selected: false
    }],
};
var list3 = {
    name: "Role B",
    name_selected: false,
    subs: [{
        sub: "Read",
        id: 1,
        selected: false
    }, {
        sub: "Update",
        id: 3,
        selected: false
    }],
};

これらを配列に追加します。

newArr.Push(list1);
newArr.Push(list2);
newArr.Push(list3);
$scope.itemDisplayed = newArr;

それらをhtmlで表示：

<li ng-repeat="item in itemDisplayed" class="ng-scope has-pretty-child">
    <div>
        <ul>
            <input type="checkbox" class="checkall" ng-model="item.name_selected" ng-click="toggleAll(item)" />
            <span>{{item.name}}</span>
            <div>
                <li ng-repeat="sub in item.subs" class="ng-scope has-pretty-child">
                    <input type="checkbox" kv-pretty-check="" ng-model="sub.selected" ng-change="optionToggled(item,item.subs)"><span>{{sub.sub}}</span>
                </li>
            </div>
        </ul>
    </div>
</li>

そして、ここにそれらをチェックするソリューションがあります：

$scope.toggleAll = function(item) {
    var toogleStatus = !item.name_selected;
    console.log(toogleStatus);
    angular.forEach(item, function() {
        angular.forEach(item.subs, function(sub) {
            sub.selected = toogleStatus;
        });
    });
};

$scope.optionToggled = function(item, subs) {
    item.name_selected = subs.every(function(itm) {
        return itm.selected;
    })
}

jsfiddle デモ

0
Sinh Nguyễn Đức