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

Question

Есть ли какая-либо функция или ng- что-то, чтобы проверить, проверен ли какой-либо из отображаемых флажков?

У меня есть значения через ng-click = "function()" и передавать значения через. Я могу идти пешком и проверять свой массив, если какое-либо значение внутри.

Я хочу активировать/деактивировать «следующую» кнопку, если установлен флажок .

Что является самым простым способом?

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

Answer 2

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

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

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

и в контроллере:

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

следующая кнопка должна быть доступна только при определенных условиях, поэтому добавьте нг отключенной директивы кнопки:

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

Теперь следующая кнопка должна быть доступна только, когда либо fooSelected истинно или baaSelected верно, и мы должны наблюдать любые изменения в этих областях, чтобы убедиться, что следующая кнопка доступна или нет:

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

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

Это также повторная запись для кода вставки. Этот пример включает: - Один список объектов - Каждый объект имеет список детей. Ex:

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

Answer 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 демо