Как проверить, установлен ли флажок в Angular

Ответ 1

Вы можете сделать что-то вроде:

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>

Fiddle: http://jsfiddle.net/uzs4sgnp/

Ответ 2

Если вы не хотите использовать наблюдателя, вы можете сделать что-то вроде этого:

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

Ответ 3

Если у вас есть только один флажок, вы можете сделать это легко с помощью только ng-модели:

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

И инициализируйте $scope.checked в вашем контроллере (по умолчанию = false). официальный документ препятствует использованию ng-init в этом случае.

Ответ 4

Попробуйте подумать о модели и о том, что происходит с этой моделью, когда установлен флажок.

Предполагая, что каждый флажок привязан к полю модели с ng-моделью, тогда свойство в модели изменяется при каждом щелчке по флажку:

<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 is true или baaSelected является истинным, и нам нужно следить за любыми изменениями в этих полях, чтобы убедиться, что следующая кнопка сделана доступной или нет:

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

Вышеприведенное предполагает, что имеется только несколько флажков, которые влияют на доступность следующей кнопки, но его можно легко изменить для работы с большим количеством флажков и использовать $watchCollection для проверки изменений.

Ответ 5

Это повторная запись для кода вставки. Этот пример включал: - Один список объектов - У каждого объекта есть список дочерних элементов. Пример:

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>

Fiddle: пример

Ответ 6

У меня есть образец для нескольких данных с их поднодом 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 демо