How to conditionally disable an object within an array in Angular

问题

I have several select elements on the same page. Each select dropdown contains the same items. I would like to disable an item within the dropdown if it has already been selected in another select element. In other words, I don't want an item to be selected more than once across all of the select elements.

Any thoughts on how to accomplish this?

When I use the following code, nothing is disabled in the dropdown.

Code for controller:

var editProject = this;

editProject.addMore = function() {

  editProject.project.fruit.push({});
};


editProject.fruitids = [

  {code: 'GOODS', fruit: '1. Apple'},
  {code: 'GOODS', fruit: '2. Orange'},
  {code: 'GOODS', fruit: '3. Peach'},
];

HTML:

<div ng-repeat="item in editProject.project.fruits">

  <select ng-model="editProject.project.fruits[$index]" 
ng-options="fruitid.class group by fruitid.code disable when (editProject.project.fruits.indexOf((fruitid)) !== -1) 
for fruitid in editProject.fruitids track by fruitid.class">

    <option value="">--Select Class--</option>

  </select>

</div>

<button ng-click="editProject.addMore()" class="btn btn-default btn-xs" role="button">Add More Classes
</button>

回答1:

You need to use a function as the expression for the disable parameter in the ng-options directive.

Please see working example1

HTML

 <div data-ng-repeat="item in items">
     <select data-ng-options="fruitId.fruit disable when isDisabled(fruitId) for fruitId in fruitIds" data-ng-model="items[$index]"></select>
  </div>

$scope.isDisabled = function(fruitid) {
    return ($scope.items.indexOf((fruitid)) !== -1);
};

This will disable the option in all the select's including the the select where the option was selected. The option will now not be selected any more as it is disabled.

You need to exclude the current fruitId so it is still enabled in the selected select

Please see example2 where the current fruitId is excluded and the selected option is disabled in the other selects

We make sure that the index found is not the index of the current item.

HTML

<div data-ng-repeat="item in items">
    <select data-ng-options="fruitId.fruit disable when isDisabled(fruitId, item) for fruitId in fruitIds" data-ng-model="items[$index]"></select>
</div>

$scope.isDisabled = function(fruitid, item) {
    return ($scope.items.indexOf((fruitid)) !== -1 && $scope.items.indexOf((fruitid)) != $scope.items.indexOf(item));
};

回答2:

This code can help to you?

index.html:

<html ng-app>
<head>
    <title>Demo</title>
    <script type="text/javascript" src="js/lib/angular.min.js"></script>
    <script type="text/javascript" src="js/controllers/app.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
</head>
<body>
    <div class="container" ng-controller="AppCtrl">
         <select ng-model="selectedOption" ng-change="change(selectedOption)">
         <option ng-repeat="var in myObj.myArr" value={{var.id}}  
                 ng-disabled="var.selectable">
                 {{var.fruit}}
         </option>
         </select>
         </div>
    </div>

    </div>
</body>
</html>

app.js:

function AppCtrl ($scope) {

  $scope.myObj = {
    "myArr":[
      {id:0, code: 'GOODS', fruit: '1. Apple', selectable:false},
      {id:1, code: 'GOODS', fruit: '2. Orange', selectable:false},
      {id:2, code: 'GOODS', fruit: '3. Peach', selectable:false}
    ]};

  $scope.selectedOption = {};
  $scope.change = function(id){
    var name = $scope.myObj.myArr[id].selectable = true;
  };
};

回答3:

You can:

1- Create an angularjs directive that encapsulate every select/dropdown and assign a unique id to each of them.

2- Bind the array of elements to all directives

3- When the user selects an item you set an item's property (assignedTo) with the unique id of the directive as the value (and clean the property for all other items with this id as value)

4- The select disables elements based on the value of the property (assignedTo !== uniqueId)

View template:

<my-select-directive unique-select-id="1" items="theItems"><my-select-directive>

<my-select-directive unique-select-id="2" items="theItems"><my-select-directive>

<my-select-directive unique-select-id="3" items="theItems"><my-select-directive>

Directive template:

<select ng-model="selectedItem" ng-change="change()">
   <option ng-repeat="item in myItems" value={{item.id}}  
         ng-disabled="item.assignedTo && item.assignedTo !== uniqueSelectId">
        {{item.fruit}}
   </option>
</select>

Directive code:

//here you can implement logic to remember previous selection, now it doesn't
scope.selectedItem= null; 
scope.change = function(){
   //needed to sync
   //remove the mark of the previous selected item for this dropdown if any
   myItems.forEach(function(item) {if (item.assignedTo === scope.uniqueSelectId) item.assignedTo = null;});
   //now mark the item as selected in this dropdown
   selectedItem.assignedTo = scope.uniqueSelectId;  
}

This is not working code, it's only to guide you

来源：https://stackoverflow.com/questions/34377714/how-to-conditionally-disable-an-object-within-an-array-in-angular

标签

angularjs

indexof