使用 ng-click 通过更改 元素来切换复选框答案

【问题标题】：Use ng-click to toggle checkboxes by altering element使用 ng-click 通过更改 元素来切换复选框
【发布时间】：2017-04-12 11:44:35
【问题描述】：

我有一个使用 MUI CSS 框架使用材料设计生成的复选框列表，下面的代码基本上基本上循环遍历一个数组并显示 5 个复选框。

 标记包含“check_box”或“check_box_outline_blank” - 如果显示“check_box”，则此“复选框”显示为选中，如果包含“check_box_outline_blank”，则显示“复选框”未选中。

使用 ng-click 我想利用函数 toggleNetwork 基本上切换  标签以包含“check_box”或“check_box_outline_blank”

// HTML

<div class="detail permissions" ng-class="{unfolded: role.showDetails != 'permissions'}" border-watch>
   <ul>
     <li ng-repeat="page in rule.pages" ng-click="toggleNetwork(this); ruleForm.$setDirty()">
      <span class="pull-left"><i class="check material-icons nomargin ">check_box</i></span>
      <i class="icon icon-{{page.service}}"></i>
      <span class="permission-description">{{page.name}}</span>
     </li>
   </ul>
</div>

// Javascript

$scope.toggleNetwork = function(this) {
  // change the `<i>` element to either 'check_box' OR 'check_box_outline_blank'
}

【问题讨论】：

标签： javascript angularjs checkbox material-design

【解决方案1】：

你也可以试试

<i class="material-icons show-icon" ng-if="!clicked">check_box_outline_blank</i>
<i class="material-icons show-icon" ng-if="clicked">check_box</i>

DEMO

【讨论】：

【解决方案2】：

做这样的事情的简单方法：在控制器中：

create $scope.isChecked = false;
$scope.toggleNetwork = function(isChecked) {
  isChecked = !isChecked;
}

在html元素中：

<li ng-click="toggleNetwork(isChecked)">
   <i>{{isChecked ? 'check_box' : 'check_box_outline_blank'}}</i>
</li>

【讨论】：