ng-clickを使用してチェックボックスを切り替えることによってチェックボックスを切り替える要素

Question

MUI CSSフレームワークを使用してマテリアルデザインを使用して生成されたチェックボックスの一覧があります。以下のコードは基本的に基本的に配列をループし、5つのチェックボックスを表示します。

<i>タグには 'check_box'または 'check_box_outline_blank'が含まれています - 'check_box'が表示されている場合はこのチェックボックスがチェックされ、 'check_box_outline_blank'が含まれている場合はチェックなしと表示されます。 // Javascriptを

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

をNG-クリック私は基本的に 'CHECK_BOX' OR 'check_box_outline_blank' のいずれかを含むように<i>タグを切り替えるには、関数toggleNetworkを利用したいを使用し

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

Answer 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

Answer 2

シンプルな方法で、次のようにする：コントローラ内の ：

html要素で

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

：

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