All geek questions in one place

How to conditionally disable an object in an array in Angular

I have several selections on one page. Each drop-down list contains the same elements. I would like to disable the item in the drop-down list if it is already selected in another select element. In other words, I do not want the item to be selected more than once in all the selection items.

Any thoughts on how to do this?

When I use the following code, nothing is turned off in the drop-down list.

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>
+4
source share
3 answers

You need to use the function as an expression for the parameter disablein the directive ng-options.

See section 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>

Js

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

option select, select, option. , .

fruitId, - select

. example2, fruitId , option select s

, .

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>

JS

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

?

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

:

1- angularjs, / .

2- Associate an array of elements with all directives

3- When the user selects an item, you set the item (assignTo) property with a unique directive identifier as a value (and clear the property for all other elements with this identifier as a value)

4- Selection disables elements based on the value of the property (assigned To! == uniqueId)

Show 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 is only for you.

0
source

Source: https://habr.com/ru/post/1620944/

More articles:


All Articles