Question

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

<i>代码包含'check_box'或'check_box_outline_blank' - 如果显示'check_box'，则此“复选框”会显示为勾选，如果它包含'check_box_outline_blank'，则会显示“复选框”，显示为未选中。

使用ng-click我想利用toggleNetwork函数基本切换<i>标记以包含'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'
}

Answer 1

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

int main(int argc, char* argv[])
{
    QApplication app(argc,argv);
    QSplitter splitter;
    QTreeView tree;
    QListView list;
    QTableView table;
    splitter.addWidget(&tree);
    splitter.addWidget(&list);
    splitter.addWidget(&table);
    splitter.show();
    return app.exec();
}

在html元素中：

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

Answer 2

您也可以尝试

<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

使用ng-click通过更改<i>元素来切换复选框

2 个答案: