Установите флажок флажка флажка в AngularJS 1.x

Question

Я все еще новичок в AngularJS, я пытаюсь создать простую функцию, которая будет включать/выключать флажок при нажатии. Таким образом, элемент clicked li в коде ниже либо установит этот флажок, чтобы включить или выключить.

Может кто-нибудь предложить лучший способ сделать это с помощью AngularJS, я знаю, что jQuery будет прост, но я пытаюсь сделать это с помощью углового метода.

мой HTML шаблон

<ul> 
     <li ng-repeat="page in rule.pages" ng-click="toggleNetwork(page.id); ruleForm.$setDirty()"> 
      <span class="pull-left"><i class="check material-icons nomargin">{{rule.pages.indexOf(page.id) >= 0 ? 'check_box' : 'check_box_outline_blank'}}</i></span> 
     </li> 
    </ul> 

мой контроллер сфера логики код

$scope.toggleNetwork = function(networkId) { 
    // function called when checkbox clicked 

} 

Answer 1

Я не вижу флажок в вашем HTML, так что я предполагаю, что вы хотите Lī теге работать как флажок.

Вы можете сделать это таким образом, если страница может иметь дополнительное свойство:

$scope.toggleNetwork = function(network) { 
    network.toggle = !network.toggle; 
} 

Если вы не хотите, чтобы добавить свойство к сети модели можно хранить переключены сети в массиве;

$scope.toggledNetworks = []; 
$scope.toggleNetwork = function(networkId) { 
    var index = $scope.toggledNetworks.indexOf(networkId); 
    if (index === -1) 
     $scope.toggledNetworks.splice(index, 1); 
    else 
     $scope.toggledNetworks.push(networkId) 
} 

Затем, если вы хотите проверить, если сеть переключены вы можете использовать функцию:

$scope.isToggled = function(networkId) { 
    return $scope.toggledNetworks.indexOf(networkId) !== -1; 
} 

Примечание:

rule.pages.indexOf(page.id) 

всегда будет возвращать -1. Страницы содержат объекты, вы хотите, чтобы индекс свойства одного объекта, который не находится в этом массиве

Answer 2

Если вы просто хотите, чтобы этот флажок включался/выключался, вам действительно не нужно ничего делать. Угловой будет делать это для вас из коробки.

вам нужно только логическую переменную в контроллере, например:

//myController.js

$scope.myCheckboxValue = false; 

И ваш HTML должен быть чем-то вроде этого:

// MyTemplate. html

<input type="checkbox" ng-model="myCheckboxValue"> 

Когда вы нажмете на этот флажок, изменения будут уже отражены на myCheckboxValue.