次のドロップダウンの最初のドロップダウンから選択したオプションを非表示にする

Question

私はドロップダウン選択を持つ動的フォームを持っています。 ng repeatを使用してオプションからデータを取得し、それをドロップダウンに表示します。私のコードはこのようにいくぶん行きます。

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

このAPIコールからデータを取得します。

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

このドロップダウンリストは動的フォームになっています。このドロップダウンで最初のフォームの値を選択したので、2番目のフォームの2番目のドロップダウンでその値を非表示にする必要があります。動的フォームコードの追加はこれです。

scope.addLanguageItem = function() { 
      $scope.LanguageFormData.language.push({ bName: null, pName: null, pNameSub: null, lFeature: null, lIngredient: null, lInstruction: null, languageCat: null }); 
      $scope.disablebrand=false; 

    }; 

どうすればできますか？

Answer 1

これは、モデルバインディングとオプションがある値（最初のドロップダウンからの）と等しい場合はng-hideによって解決できます。

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

次のように作成したフォームを使用している場合：あなたが最初のドロップダウンで「データ」に結合されていると仮定すると、あなたは（2番目のドロップダウン中）の線に沿って何かを試してみました次のようにgetCategoriesを実装できます。

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