要素フォームを選択した後、list2のドロップダウンで配列から要素を削除する方法list1ドロップダウンをAngular jsでですか？

Question

同じ配列要素を含む2つのドロップダウンリストがあります。 1つの要素フォームlist1（part1）を選択した後、listB（part1）から要素shoulbを削除します。リスト1の要素を選択解除すると、要素（part1）は配列（list2）になるはずです その逆です。

だから私はここに、この

Controller.js 
$scope.list1= [{"columnName": "part1",value: "obj1"}, 
       {"columnName": "part2",value: "obj2"}, 
       {"columnName": "part3",value: "obj3"}, 
       {"columnName": "part4",value: "obj4"}, 
       {"columnName": "part5",value: "obj5"}] 


$scope.list2 = [{"columnName": "part1",value: "obj1"}, 
      {"columnName": "part2",value: "obj2"}, 
      {"columnName": "part3",value: "obj3"}, 
      {"columnName": "part4",value: "obj4"}, 
      {"columnName": "part5",value: "obj5"}] 


$scope.getColumn = function(colum) { 

$scope.indexOfcolum = $scope.list2.indexOf(colum); 
$scope.removecolum = $scope.list2.splice($scope.indexOfcolum,1) 
console.log($scope.indexOfcolum ,'colum index',$scope.removecolum) 
} 

Htmlの

<form> 
    Xxis <select ng-model="xcolumn" ng-options=" l1.columnName for l1 in list1"ng-change="getColumn(xcolumn)"> 
     <option value=""></option> 
     </select> 
    yAxis 
<select ng-model="xcolumn" ng-options=" l2.columnName for l2 in list2"ng-change="getColumn()"> 
<option value=""></option> 
</select> 
</form> 

ように私のバイオリンのリンクを試してみました：http://jsfiddle.net/soumyagangamwar/9ra59ptb/

私は（オプションの値を= ""）選択解除すると、配列はすべてが含まれている必要がありますが要素。リストA（part1）で2番目のリストに表示されてはならない値を1つ選択すると、 listA（part2）で2番目の値を選択した場合、part2はlistBで消滅し、part1もlistBで消失します。

いずれかがあなたの代わりにngChangeディレクティブを使用することを行うためにfilterを作成することができ、この

Answer 1

に私を助けてくださいすることができます。

まず、ngModelを有用なもの：

<select ng-model="xaxis" ng-options></select> 
<select ng-model="yaxis" ng-options></select> 

第二に、別のselectで選択した項目をフィルタリングし、それが現在のselectに消えるように、我々は次のようfilterngOptionsでディレクティブを使用したいのですが以下：

<select ng-options="l1.columnName for l1 in list1 | onlyNotSelectedCouldShowHere"> 

名前はonlyNotSelectedCouldShowHereですが、ちょっと面倒ですね。したがって、実際のコードではnotSelectedという名前のみを使用します。 ：P

それを動作させるために、我々は（ちょうどmyAppに追加）filterを作成する必要があります。

myApp 
    // Create a filter 
    .filter('notSelected', function(){ 
    return function(list, target) { 
     // If there is no selected item in xaxis or yaxis, return all of the items 
     if (target === undefined) return list; 

     // Use Array.prototype.filter() function [ES5] 
     var filtered = list.filter(function(item) { 
     return item.columnName !== target.columnName; 
     }); 
     // Return the filtered array. 
     return filtered; 
    } 
    }); 

我々はxのfilter（yaxis選択に引数を渡す必要があることを認識した後と

<select ng-model="xaxis" ng-options=" l1.columnName for l1 in list1 | notSelected:yaxis"></select> 
<select ng-model="yaxis" ng-options=" l2.columnName for l2 in list2 | notSelected:xaxis"></select> 

チェックアウトthe updated jsfiddle：yの選択）についてxaxisは、我々は、HTMLを更新します。

はAngularJSで filterの詳細については、私は優れた記事を見つけた： Everything about custom filters in AngularJSトッドモットーで。

中国での8/7/16早朝の更新：value=""が選択されている場合は、完全なリストを表示してください。

myApp.filter('notSelected', function(){ 
    return function(list, target) { 
    // undefined: If there is no selected item in xaxis or yaxis, 
    // null  : or if value="" is selected 
    // return the full list 
    if (target === undefined || target === null) return list; 
    var filtered = list.filter(function(item) { 
     return item.columnName !== target.columnName; 
    }); 
    // console.log(filtered); 
    return filtered; 
    } 
}); 

チェックアウトthe updated jsfiddle。