Angular에서 체크박스가 켜져 있는지 확인하는 방법

Angular에서 체크박스가 켜져 있는지 확인하는 방법

표시되는 체크박스가 체크되어 있는지 확인하는 기능이나 ng-something이 있습니까?

ng-click="function()"을 통해 값을 전달하고 있습니다.도보로 이동하여 내부에 값이 있는지 어레이를 확인할 수 있습니다.

체크 박스가 온이 되어 있는 경우는, 「다음」버튼을 유효/비활성화하고 싶다.

가장 쉬운 방법이 뭐죠?

워처를 사용하지 않을 경우 다음과 같은 작업을 수행할 수 있습니다.

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

다음과 같은 작업을 수행할 수 있습니다.

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/

업데이트: 또는 를 사용하지 않고 조금 다른 방법을 사용할 수도 있습니다.$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/

체크박스가1개밖에 없는 경우 ng-model만으로 간단하게 할 수 있습니다.

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

$scope를 초기화합니다.컨트롤러에 체크인(기본값=false).이 경우 공식 문서에서는 ng-init 사용을 권장하지 않습니다.

모델 및 체크박스를 켜면 해당 모델에 어떤 일이 일어날지 생각해 보십시오.

각 체크박스가 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>

다음 버튼은 foo Selected가 true 또는 baa Selected가 true일 때만 사용할 수 있으며 다음 버튼을 사용할 수 있는지 확인하기 위해 이러한 필드의 변경 사항을 확인해야 합니다.

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

위의 예에서는 다음 버튼의 가용성에 영향을 주는 체크박스는 몇 개밖에 없다고 가정하고 있지만, 더 많은 체크박스와 함께 작동하도록 쉽게 변경할 수 있으며 $watchCollection을 사용하여 변경을 확인할 수 있습니다.

이것은 삽입 코드용 재포스트입니다.다음 예시는 - 하나의 개체 목록 - 각 개체에는 자식 목록이 있습니다.예:

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개의 목록을 만들고 하나의 객체 목록에 추가합니다.

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>

Findle:

서브노드 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 데모

언급URL : https://stackoverflow.com/questions/20968170/how-to-check-if-any-checkbox-is-checked-in-angular