AngularJS 1.xで入力チェックボックスのチェックをオン/オフにしました

Question

私はまだAngularJSを使い始めていません。クリックするとオン/オフを切り替える簡単な機能を持っています。下のコードでクリックされたli要素は、そのチェックボックスをオンまたはオフに設定します。

誰もAngularJSを使ってこれを行うための最良の方法を提案することができますが、私はjQueryがシンプルであることを知っていますが、これをAngularな方法でやろうとしています。

私の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

私はあなたがチェックボックスとして働くのliタグにしたいと仮定していますので、私はあなたのhtmlのチェックボックスが表示されません。ページには、追加のプロパティを持つことができる場合

あなたは、そのように行うことができます。

$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に反映されています。