Soumya Gangamwar Soumya Gangamwar - 3 months ago 23
AngularJS Question

How to remove a element from array in dropdown of list2 after selecting an element form list1 drop down in Angular js?

I have two drop down lists containng same array elements. after selecting one element form list1(part1) the element shoulb be deleted from listB(part1). If I unselect the element in list1 then the element(part1) should be in array(list2)
vice versa.

So I tried like this

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>


Here my fiddle link :http://jsfiddle.net/soumyagangamwar/9ra59ptb/

When I unselect the(option value="") then array should contain all the elements. and If I select one value in list A(part1) that should not appear in second list. and then If I select second value in listA(part2) then part2 is disappear in listB and part1 also should in listB.

can any one please help me to this

Answer

You can create a filter to do that instead of using ngChange directives.

First of all, make ngModel useful:

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

Second, to filter the selected item in another select and make it disappear in the current select, we'd like to use a filter in ngOptions directive like below:

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

The name onlyNotSelectedCouldShowHere is a little tedious, right? So we'll only use notSelected as the name in the real code below. :P

To make it work, we need to create a filter (just appended to myApp):

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

After realising that we need to pass an argument to the filter (yaxis for the x select and xaxis for the y select), we update the html:

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

Check out the updated jsfiddle.

To learn more about the filter in AngularJS, I've found an excellent post: Everything about custom filters in AngularJS by Todd Motto.

Update on the early morning of 8/7/16 in China: when value="" is selected, show the full list.

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

Check out the updated jsfiddle.

Comments