Toggleクラスhide複数のangularjを表示

Question

ng-clickで複数の要素のクラスを個別に切り替えるにはどうすればよいですか？

Iは、表示/非表示を切り替えたいが、私は1を押すと、両方の入力がショーを取得します。

.controller('AppCtrl',['$scope', function($scope){ 
 
     $scope.custom = true; 
 
     $scope.ShowHide = function() { 
 
      $scope.custom = $scope.custom === false ? true: false; 
 
     }; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="item item-checkbox"> 
 
        <label class="checkbox"> 
 
         <input type="checkbox" value="on" ng-click="ShowHide()"> 
 
        </label> 
 
        Test1 
 
</div> 
 
<div class="item range range-positive" ng-hide="custom"> 
 
        
 
    <input type="range" min="0" max="10" step="1" > 
 
        
 
</div> 
 
<div class="item item-checkbox"> 
 
        <label class="checkbox"> 
 
         <input type="checkbox" value="on" ng-click="ShowHide()"> 
 
        </label> 
 
        Test2 
 
</div> 
 
<div class="item range range-positive" ng-hide="custom"> 
 
        
 
    <input type="range" min="0" max="10" step="1" > 
 
        
 
</div>

Answer 1

どこでもcustom値を変更するとng-hide="custom"を持って、両方の要素を非表示になりますので、することにより、現在、あなたは、名前がcustomで同じ変数を参照しているので。これらの変数には異なる名前を付ける必要があります。

フラグをトグルしながら、それはまた、以下の作業を行いますので、あなたは、ng-repeatを使用して、すべてのテンプレートをレンダリングする場合、それが良いだろう。あなたがチェックボックスの上にng-model直接&が、その後item.showそのよう

マークアップ

<div ng-repeat="item in items"> 
    <div class="item item-checkbox"> 
     <label class="checkbox"> 
      <input type="checkbox" value="on" ng-model="item.show"> 
     </label> Test1 
    </div> 
    <div class="item range range-positive" ng-hide="item.show"> 
     <input type="range" min="0" max="10" step="1" ng-model="item.range"/> 
    </div> 
</div> 

コード

$scope.items = [ 
    {Id: 1, Value: true, range: 1 }, //Value true will make checkbox check by default 
    {Id: 2, show: true, Range: 1 }, 
    {Id: 3, show: true, range: 1 }, 
    {Id: 4, show: true, range: 1 }, 
    {Id: 5, show: true, range: 1 }, 
    {Id: 6, show: true, range: 1 }, 
    {Id: 7, show: true, range: 1 }, 
]