Désactiver les options dans une liste déroulante dans angularjs en fonction de la valeur sélectionnée dans une autre liste

Question

J'ai une ligne dans une table qui contient une liste déroulante et 2 zones de saisie. L'utilisateur peut ajouter et supprimer plusieurs lignes. L'état sélectionné dans une ligne dans la liste déroulante ne peut pas être sélectionné dans les autres lignes. Par exemple, si Delhi est sélectionné dans la première ligne et que l'utilisateur ajoute d'autres lignes, alors Delhi doit être désactivé dans chacune d'entre elles. S'il vous plaît laissez-moi savoir comment l'implémenter. J'ai essayé plusieurs solutions qui avaient des listes déroulantes qui dépendent les unes des autres mais ici j'ajoute des lignes. Voici le lien Plunker pour mon code:

http://plnkr.co/edit/o2NQFKitWB2ngdagr6zI?p=preview

HTML:

<div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
      <h4 class="panel-title">Country 
      </h4> 
      </a> 
     </div> 
     <div id="collapse1" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
      <div class="rettbl-format"> 
       <div class="table-responsive"> 
       <table class="table tbl inv exp table-bordered"> 
        <thead> 
        <tr> 
         <th> 
         <input type="checkbox" class="chkbx" name="main" data-ng-model="selectedAll" data-ng-click="selectAllInterSups()"/> 
         <label for="main"></label> 
         </th> 
         <th class="text-center">State</th> 
         <th class="text-center">Total Value</th> 
         <th class="text-center">Actual Value</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr ng-repeat="objUnreg in interStateSup.unreg_details"> 
         <th> 
         <input type="checkbox" class="chkbx" name="objUnreg_{{$index}}" data-ng-model="objUnreg.selected"/> 
         <label for="objUnreg_{{$index}}"></label> 
         </th> 
         <td> 
         <select name="stcode" class="form-control" data-ng-model="objUnreg.pos" data-ng-options="item.c as item.c+' - '+item.n for item in unregBlkStates" data-ng-required="objUnreg.txval>0 || objUnreg.iamt>0"> 
          <option value="">Select</option> 
         </select> 
         <span ng-show="myForm.stcode.$error.required"></span> 
         </td> 
         <td> 
         <input class="form-control formedit newinv currency" data-ng-model="objUnreg.txval"/> 
         </td> 
         <td> 
         <input class="form-control formedit newinv currency" data-ng-model="objUnreg.iamt" /> 
         </td> 
        </tr> 
        </tbody> 
       </table> 
       <div class="row pull-right"> 
        <button type="button" class="btn btn-primary" data-ng-click="addNewUnRegSups()">ADD</button> 
        <button type="button" class="btn btn-danger" data-ng-click="removeSelectedUnRegSups()">REMOVE</button> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

JS:

$scope.unregBlkStates = [{ 
    "c": "35", 
    "n": "Andaman and Nicobar Islands", 
    "u": "Y" 
}, { 
    "c": "37", 
    "n": "Andhra Pradesh", 
    "u": "N" 
}, { 
    "c": "12", 
    "n": "Arunachal Pradesh", 
    "u": "N" 
}, { 
    "c": "18", 
    "n": "Assam", 
    "u": "N" 
}, { 
    "c": "10", 
    "n": "Bihar", 
    "u": "N" 
}, { 
    "c": "04", 
    "n": "Chandigarh", 
    "u": "Y" 
}, { 
    "c": "22", 
    "n": "Chhattisgarh", 
    "u": "N" 
}, { 
    "c": "26", 
    "n": "Dadra and Nagar Haveli", 
    "u": "Y" 
}, { 
    "c": "25", 
    "n": "Daman and Diu", 
    "u": "Y" 
}, { 
    "c": "07", 
    "n": "Delhi", 
    "u": "N" 
}, { 
    "c": "30", 
    "n": "Goa", 
    "u": "N" 
}, { 
    "c": "24", 
    "n": "Gujarat", 
    "u": "N" 
}, { 
    "c": "06", 
    "n": "Haryana", 
    "u": "N" 
}, { 
    "c": "02", 
    "n": "Himachal Pradesh", 
    "u": "N" 
}, { 
    "c": "01", 
    "n": "Jammu and Kashmir", 
    "u": "N" 
}, { 
    "c": "20", 
    "n": "Jharkhand", 
    "u": "N" 
}, { 
    "c": "29", 
    "n": "Karnataka", 
    "u": "N" 
}, { 
    "c": "32", 
    "n": "Kerala", 
    "u": "N" 
}, { 
    "c": "31", 
    "n": "Lakshadweep", 
    "u": "Y" 
}, { 
    "c": "23", 
    "n": "Madhya Pradesh", 
    "u": "N" 
}, { 
    "c": "27", 
    "n": "Maharashtra", 
    "u": "N" 
}, { 
    "c": "14", 
    "n": "Manipur", 
    "u": "N" 
}, { 
    "c": "17", 
    "n": "Meghalaya", 
    "u": "N" 
}, { 
    "c": "15", 
    "n": "Mizoram", 
    "u": "N" 
}, { 
    "c": "13", 
    "n": "Nagaland", 
    "u": "N" 
}, { 
    "c": "21", 
    "n": "Odisha", 
    "u": "N" 
}, { 
    "c": "34", 
    "n": "Puducherry", 
    "u": "N" 
}, { 
    "c": "03", 
    "n": "Punjab", 
    "u": "N" 
}, { 
    "c": "08", 
    "n": "Rajasthan", 
    "u": "N" 
}, { 
    "c": "11", 
    "n": "Sikkim", 
    "u": "N" 
}, { 
    "c": "33", 
    "n": "Tamil Nadu", 
    "u": "N" 
}, { 
    "c": "36", 
    "n": "Telangana", 
    "u": "N" 
}, { 
    "c": "16", 
    "n": "Tripura", 
    "u": "N" 
}, { 
    "c": "09", 
    "n": "Uttar Pradesh", 
    "u": "N" 
}, { 
    "c": "05", 
    "n": "Uttarakhand", 
    "u": "N" 
}, { 
    "c": "19", 
    "n": "West Bengal", 
    "u": "N" 
}]; 

var emptyObj = { 
    'pos': 0, 
    'txval': 0.0, 
    'iamt': 0.0 
}; 
$scope.interStateSup = { 
    'unreg_details': [angular.copy(emptyObj)], 
}; 
$scope.goToPage = function (path) { 
    $location.path(path); 
}; 

$scope.selectedAll = false; 
$scope.selectAllInterSups = function() { 
    angular.forEach($scope.interStateSup.unreg_details, function (obj) { 
     obj.selected = $scope.selectedAll; 
    }); 
}; 

$scope.addNewUnRegSups = function() { 
    $scope.interStateSup.unreg_details.push(angular.copy(emptyObj)); 
}; 
$scope.removeSelectedUnRegSups = function() { 
    var newDataList = []; 
    $scope.selectedAll = false; 
    angular.forEach($scope.interStateSup.unreg_details, function (obj) { 
     if (obj.selected === undefined || (obj.selected !== undefined && !obj.selected)) { 
      newDataList.push(obj); 
     } 
    }); 
    $scope.interStateSup.unreg_details = newDataList; 
}; 

Answer 1

Difficile à dire que ce soit la meilleure solution, mais cela fonctionne. Vous devez créer un filtre (spécifique à vos données):

app.filter('exclude', function() { 
    return function(list,currentModel,selected){ 
     var selectedLength = selected.length; 
     var out = []; 
     angular.forEach(list,function(listItem,index){ 
     var add = true; 
     for (var index = 0; index < selectedLength; index++) { 
      if(selected[index].pos !== currentModel && selected[index].pos === listItem.c){ 
      add = false; 
      break; 
      } 
     } 

     if(add){ 
      out.push(listItem); 
     } 

     }); 

     return out; 
    } 
}); 

HTML:

<select name="stcode" class="form-control" data-ng-model="objUnreg.pos" data-ng-options="item.c as item.c+' - '+item.n for item in unregBlkStates|exclude:objUnreg.pos:interStateSup.unreg_details" data-ng-required="objUnreg.txval>0 || objUnreg.iamt>0"> 
    <option value="">Select</option> 
</select> 

http://plnkr.co/edit/zJnExGHQ9hJznoF4TyZI?p=preview