使用納克單擊通過改變<i>元件

我有使用MUI CSS框架中使用的材料設計產生的複選框列表，下面基本上基本上代碼循環的陣列和顯示器5個複選框來切換複選框。如果它顯示'check_box'，則顯示勾選此「複選框」，如果它包含'check_box_outline_blank'，它將顯示「複選框」顯示爲未勾選。使用納克單擊通過改變<i>元件

使用NG點擊我要利用功能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' 
}

來源

2016-11-28 Zabs

您也可以嘗試

<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

來源

2016-11-28 19:45:56 user3249448

簡單的做法就是這樣： in controller：

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>

來源

2016-11-28 19:37:29 israelor

使用納克單擊通過改變<i>元件

回答

相關問題