数値に基づいてng-repeatチェックボックスを無効にする角度

Question

ng-repeatを使用して表示されるチェックボックスのリストを持っているので、特定の値に基づいていくつかのチェックボックスを無効にする必要があります。

checkbox display code 

<div class="checkbox"> 
    <label ng-repeat="specific in specifications"> 
      <input ng-click="onClick(specific, newObject[specific])" id="specifications_chk" value="{{specific}}" ng-model="newObject[specific]" type="checkbox"> 
      {{specific}} 
    </label> 
</div> 

ここでは、ng-click機能を使用してチェックボックスを無効にしています。コントローラコードで

This is my controller code: 

$scope.onClick = function(sp, checked){ 
     if(sp == 'Sofa_Cleaning' && checked === true){ 
      angular.element(document.getElementById('specifications_chk'))[0].disabled = true; 
     } 

     if(sp == 'Sofa_Cleaning' && checked === false){ 
      angular.element(document.getElementById('specifications_chk'))[0].disabled = false; 
     } 

    }; 

html view: 

でき無効に最初の値のみ(IndepthHomeCleaning)だ、そうSofa_Cleaningはchecked

ときにどのように私はRoom_Cleaning, Kitchen_Cleaning,とCarpet_cleaningを無効にすることができ、私はこれで立ち往生午前、ヘルプは本当に

Answer 1

specificationsアレイを変更する場合は、新しいアレイとマッピングが必要です。 各仕様の新しい行オブジェクトを定義します。 仕様書の行にアクセスし、その仕様に基づいて（その機能が有効または無効になっています）

http://jsfiddle.net/ms403Ly8/87/

function testCtrl($scope, $filter) { 
$scope.specifications = ["IndepthHomeCleaning", "Room_Cleaning", "Kitchen_Cleaning", "Carpet_cleaning", "Sofa_Cleaning"]; 
$scope.specificationRows = []; 

$scope.newRow = function(spec) { 
    var newSpec = { 
     SpecName: spec, 
     IsDisabled: false, 
     IsClicked: false 
    }; 
    $scope.specificationRows.push(newSpec); 
}; 

$scope.getRowObject = function(sp) { 
    return $filter('filter')($scope.specificationRows, { 
     SpecName: sp 
    })[0]; 
}; 

$scope.getRowStatus = function(spec) { 
    console.log($filter('filter')($scope.specificationRows, { 
     SpecName: spec 
    })[0].IsDisabled); 
    return $scope.getRowObject(spec).IsDisabled; 
}; 

$scope.onClick = function(sp) { 
    $scope.getRowObject(sp).IsClicked = !$scope.getRowObject(sp).IsClicked; 
    if (sp == 'Sofa_Cleaning') { 
     $scope.getRowObject("Carpet_cleaning").IsDisabled = $scope.getRowObject(sp).IsClicked; 
     $scope.getRowObject("Kitchen_Cleaning").IsDisabled = $scope.getRowObject(sp).IsClicked; 
     $scope.getRowObject("Room_Cleaning").IsDisabled = $scope.getRowObject(sp).IsClicked; 
    } 
}; 

}

getRowObjectは一例です。たぶんベストプラクティスではないでしょう。この機能を変更することができます。

Answer 2

を理解されるであろう

使用ng-disabled

var angApp = angular.module('myApp', []); 
 

 
angApp.controller('MyController', function MyController($scope) { 
 
    $scope.specifications = [{"text":"IndepthHomeCleaning ", "disabled":false, "checked":false}, 
 
          {"text":"Room_Cleaning", "disabled":false, "checked":false}, 
 
          {"text":"Kitchen_Cleaning", "disabled":false, "checked":false}, 
 
          {"text":"BathroomCleaning", "disabled":false, "checked":false}, 
 
          {"text":"Carpet_cleaning", "disabled":false, "checked":false}, 
 
          {"text":"Sofa_Cleaning", "disabled":false, "checked":false}]; 
 
    
 
    $scope.onClick = function(sp, checked){ 
 
    console.log(sp, checked); 
 
     if(sp.text == 'Sofa_Cleaning' && checked){ 
 
      $scope.specifications[1].disabled = true; 
 
      $scope.specifications[2].disabled = true; 
 
      $scope.specifications[4].disabled = true; 
 
     } 
 

 
     if(sp.text == 'Sofa_Cleaning' && !checked){ 
 
      $scope.specifications[1].disabled = false; 
 
      $scope.specifications[2].disabled = false; 
 
      $scope.specifications[4].disabled = false; 
 
     } 
 

 
    }; 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="MyController"> 
 
    <div class="checkbox"> 
 
    <label ng-repeat="specific in specifications" style="display:block"> 
 
      <input ng-disabled="specific.disabled" ng-change="onClick(specific, specific.checked)" id="specifications_chk" value="specific.checked}" ng-model="specific.checked" type="checkbox"> 
 
      {{specific.text}} 
 
    </label> 
 
</div> 
 
</div>

Answer 3

あなたはこれを複雑にしていると思います。あなたのデータオブジェクトは、この

$scope.specifications = [ 
    {name: 'Sofa_Cleaning', active: false}, 
    {name: 'Carpet_Cleaning', active: false}, 
    {name: 'Room_Cleaning', active: false}, 
    {name: 'Kitchen_Cleaning', active: false}, 
    {name: 'BathroomCleaning', active: false} 
]; 

テンプレートのように見えるように簡素化する必要があります。

<input type="checkbox" 
    ng-bind="specific.name" 
    ng-model="specific.active" 
    ng-disabled="shouldDisable(specific)"> 

あなたのコントローラに

$scope.disableWhenSofaIsChecked = ['Room_Cleaning','Kitchen_Cleaning','Carpet_Cleaning']; 
$scope.shouldDisable = function(specific) { 
    var disable = $scope.disableWhenSofaIsChecked; 
    if(disable.indexOf(specific.name) > -1) { 
     for(var obj in $scope.specifications) { 
      if(obj.name === 'Sofa_Cleaning') { 
       return obj.active; 
      } 
     } 
    } 
    return false; 
} 

EDIT

あなたは仕様を取得しているので、場合APIからのデータは、これを行うことができます：

SomeApi 
    .get() 
    .then(function(results){ 
     // Assuming it's a promise. End result is the same for a passed-in callback 
     // Assuming results is an array of names 
     $scope.specifications = results.map(function(item){ 
      return { 
       name: item, 
       active: false 
      }; 
     }); 
    }); 

Answer 4

dom操作にjqueryを使用しないでください。

ng-clickではなくng-changeを使用してください。これは適切なものになります。

ここで私はplunkrを更新しました。

ここでは単純な例として、値がcheck5の場合は のようにして、すべてのチェックボックスを無効にしています。それ以外の場合は、チェックボックスを有効にします。

https://jsfiddle.net/AvGKj/517/

注：私は少し古いプラグインを使用しました。論理を単独で取ってください

<div ng-controller="MyCtrl"> 
    <table> 
    <tr ng-repeat="appObj in myAppObjects"> 
     <td> 
     <input type="checkbox" ng-model="appObj.cb1" 
     ng-disabled="appObj.disable" 
     ng-change="Disable(appObj,myAppObjects)"> 
     {{appObj.value}} 
      </td> 
    </tr> 
    </table> 
    {{myAppObjects}} 
    <br>list of checked items: {{checkedItems()}} 
</div> 

function MyCtrl($scope) { 

     $scope.myAppObjects = [ 
     {id:1,value:'check1'}, 
     {id:2,value:'check2'}, 
     {id:3,value:'check3'}, 
     {id:4,value:'check4'}, 
     {id:5,value:'check5'} 
     ]; 

     $scope.Disable=function(appObj,list) 
     { 
     if(appObj.value=="check5") 
     { 
      for(var i=0; i<list.length;i++) 
      { 
      if(list[i].value!="check5") 
       { 
       if(appObj.cb1==true) 
       { 
       list[i].disable=true; 
       } 
       else{ 
       list[i].disable=false; 
       } 
       } 
      } 
     } 
     } 
} 

Answer 5

コード内の複数の要素に同じIDを使用しないでください。要素IDを一意にする必要があります。

HTML：

<div ng-app ng-controller="LoginController"> 
    <div class="checkbox"> 
    <label ng-repeat="specific in specifications"> 
     <input id="specifications_chk{{$index}}" ng-click="onClick(specific, newObject[specific])" value="{{specific}}" ng-model="newObject[specific]" type="checkbox" /> {{specific}} 
     <br> 
    </label> 
    </div> 
</div> 

はJavaScript：

function LoginController($scope) { 
    $scope.specifications = ['IndepthHomeCleaning', 
    'Room_Cleaning', 
    'Kitchen_Cleaning', 
    'BathroomCleaning', 
    'Carpet_cleaning', 
    'Sofa_Cleaning' 
    ]; 
    $scope.newObject = { 
    'IndepthHomeCleaning': 1, 
    'Room_Cleaning': 2, 
    'Kitchen_Cleaning': 3, 
    'BathroomCleaning': 4, 
    'Carpet_cleaning': 5, 
    'Sofa_Cleaning': 6 
    }; 
    $scope.onClick = function(sp, checked) { 
    if (sp == 'Sofa_Cleaning' && checked === true) { 
     angular.element(document.getElementById('specifications_chk1'))[0].disabled = true; 
     angular.element(document.getElementById('specifications_chk2'))[0].disabled = true; 
     angular.element(document.getElementById('specifications_chk4'))[0].disabled = true; 
    } 

    if (sp == 'Sofa_Cleaning' && checked === false) { 
     angular.element(document.getElementById('specifications_chk1'))[0].disabled = false; 
     angular.element(document.getElementById('specifications_chk2'))[0].disabled = false; 
     angular.element(document.getElementById('specifications_chk3'))[0].disabled = false; 
    } 


    }; 
} 

JsFiddle：https://jsfiddle.net/nikdtu/f7k3kcwn/

Answer 6

あなたは、各DOM要素に対して一意でなければなりません 'ID' 属性を使用しています。だから間違いなくあなたのソリューションは単一の要素を取ります。したがって、class属性とdocument.getElementbyClass関数を使用してみてください。

Answer 7

まだjqueryに固執している理由はわかりません。あなたはチェックボックスを無効にしようとしているときに をIDで取得しています。

。

htmlでは、idは現在のhtmlページで一意である必要があります。重複したIDを持つ であり、無効化しようとしているときに[o]を使用して 配列の最初の値を取得しています。

。

あなたが厳密に同じ方法で得られた溶液は、その後のチェックボックスのために 以下の方法論を使用するクラス名の代わりにIDを使用して 角度要素を使用して無効にしたい場合。

無効にする必要がある場合は、次のコードを使用してください。必要に応じて適切なコードを使用してください。

angular.forEach(document.getElementsByClassName('checkbox1'), function(value, key) { 
     angular.element(value)[0].disabled = true; 
     debugger 
    });