Question

我有一个具有下拉选择的动态表单。我使用ng repeat从选项中获取数据，然后在下拉列表中显示它。我的代码有点像这样。

for (b = 0; b < size; b++)

我从此API调用中获取数据。

<select name="languageCat" id="languageCat" ng-model="languageItem.languageCat" ng-required="true" required>
     <option value="">---Please select---</option>
     <option ng-repeat="item in scpLangCat" value="{{item.language_name}}">{{item.language_name}} - {{item.language_description}}</option>
 </select>

这个下拉列表是我的动态形式。我在此下拉列表中选择了第一个表单中的值，我需要在第二个表单中的第二个下拉列表中隐藏该值。添加动态表单代码就是这样。

Service.fetchDropdownData('language')
 .then(function(data){
     $scope.scpLangCat = data.data;
     localStorage.LanguageCategory = JSON.stringify(data.data);
 })

我怎么可能这样做？

Answer 1

如果选项等于某个值（来自第一个下拉列表），可以通过模型绑定和ng-hide来解决。假设你绑定了＆＃34;数据＆＃34;在第一个下拉列表中，您是否尝试过（在第二个下拉列表中）：

<option ng-repeat="item in scpLangCat" ng-hide="data.someValue == item.someValue" value="{{item.language_name}}">{{item.language_name}} - {{item.language_description}}</option>

Answer 2

如果你有像这样创建的表格

<div ng-repeat="(index,scpLangCat) in LanguageFormData">
    <select name="languageCat[index]" id="{{'languageCat_' + index}}" ng-model="languageItem.languageCat[index]" ng-required="true" required
    ng-options="item.language_name +' - ' + item.language_description as item.label for item in getCategories() track by item.language_name">
    </select>
</div>

您可以这样实现getCategories：

$scope.getCategories() = function() {
    return $scope.scpLangCat.filter(function(item){return $scope.languageItem.languageCat.indexOf(item.language_name)==-1);
}

隐藏下一个下拉列表中第一个下拉列表中的选定选项

2 个答案: