根据另一个列表中的选定值在下拉列表中禁用angularjs中的选项

我在包含一个下拉列表和2个输入框的表中有一行。用户可以添加和删除多行。在下拉列表中选中的状态不能在其他行中选择。例如，如果德里在第一排被选中，并且用户添加了其他一些行，那么德里应该被禁用。请让我知道如何实施它。我已经尝试了多个解决方案，这些解决方案相互依赖，但在这里我添加了行。这里是Plunker链接，我的代码：根据另一个列表中的选定值在下拉列表中禁用angularjs中的选项

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

来源

2017-08-01 Tanuj

的可能的复制[AngularJS禁用先前选择的下拉选项]（HTTPS：/ /stackoverflow.com/questions/42432187/angularjs-disable-dropdown-option-which-previously-selected） – anu

@slacker你可以在Plunker中演示它如何工作？ – Tanuj

你是否经历过这个例子？你懂什么？ – anu

很难说是否这是最好的解决方案，但它的工作原理。您需要创建（专用于数据）过滤器：

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

来源

2017-08-01 13:38:42 krutkowski86

完美的作品！非常感谢.. – Tanuj

根据另一个列表中的选定值在下拉列表中禁用angularjs中的选项

回答

相关问题