Angular根據值禁用ng-repeat複選框

我有一個使用ng-repeat顯示的複選框列表，現在我需要根據特定值禁用某些複選框複選框被選中。Angular根據值禁用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)，所以，我怎麼可以禁用Room_Cleaning, Kitchen_Cleaning,和Carpet_cleaning時Sofa_Cleaning是checked

難道我堅持這一點，幫助將是非常讚賞

來源

2016-04-22 Nodemon

'ng-disabled'怎麼樣？ – Rayon

我沒有想法返回多個值 – Nodemon

@Nodemon現在請檢查代碼， – byteC0de

如果你想改變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是例子。也許這不是最佳做法。你可以改變這個功能。

來源

2016-04-22 07:01:32

使用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>

來源

2016-04-22 06:07:49 byteC0de

我認爲你已經完成了複雜化。您的數據對象應該被簡化爲像這樣

$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; 
}

編輯

所以，如果你得到規範來自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 
      }; 
     }); 
    });

來源

2016-04-22 06:21:34 tsuz

謝謝，問題是我從api獲取這個值，所以我不能添加新的對象 – Nodemon

@Nodemon我不知道你的意思。什麼新對象？ – tsuz

@Nodemon，你可以動態地將對象屬性添加到角度對象。 Api對象與角對象不同。將值傳遞給api時，發送適當的值。 –

-1

請勿使用jQuery來進行dom操作。

使用ng-change代替ng-click。這將是適當的。

這裏我更新了一個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; 
       } 
       } 
      } 
     } 
     } 
}

來源

2016-04-22 06:31:23

這裏的問題是在多個元素上使用相同的id。而你的代碼不是解決真正問題的事件。我想你禁用所有其他複選框，但它必須有選擇性的問題描述。 –

如果您認爲id是該複選框的真正問題，那麼我爲複選框添加了相同的id。請檢查plnkr https://jsfiddle.net/AvGKj/518/。他需要這樣的答案，他需要根據一個複選框的值禁用某些特定的複選框。我已經添加了，禁用所有複選框。我希望他有簡單的邏輯思維來根據需要改變控制器的狀態。 –

對於代碼中的多個元素，您不應該有相同的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/

來源

2016-04-22 06:31:47

應該嚴格避免以下angular.element（document.getElementById（'specifications_chk1'）），當ng-disable可從angular獲得時。 –

你能提供一些角度的指導來支持你的評論嗎？ –

您正在使用的 'id' 屬性，它應該是每一個DOM元素是唯一的。所以絕對你的解決方案將採取單一元素。所以你應該嘗試使用class屬性和document.getElementbyClass函數。

來源

2016-04-22 06:52:56

我不知道你爲什麼仍然堅持jQuery。當您試圖禁用複選框時，您將通過id獲取。

。

在html中，id對於當前html頁面應該是唯一的。你是有重複的ID，並且你正在嘗試禁用時使用[o]從數組中獲得第一個值。

。

如果嚴格要從同樣的方法解決方案則使用以下方法使用類名稱，而不是ID爲複選框，並使用角元素和禁用。

應在需要禁用的地方使用以下代碼。根據您的需要使用適當的代碼。

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

來源

2016-04-22 07:20:24

Angular根據值禁用ng-repeat複選框

回答

相關問題