Is there a way to delete an element from a dropdown array in list2 after selecting an element from the dropdown list1 in Angular JS?

Question

Is there a way to delete an element from a dropdown array in list2 after selecting an element from the dropdown list1 in Angular JS?

I have a requirement where I need to work with two drop-down lists that contain the same array elements. When an element is selected from list1 (part1), it should be removed from list2 (part1). Conversely, if the element is unselected in list1, it should appear back in list2.

To address this issue, I attempted the following JavaScript code:

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(column) {
  $scope.indexOfColumn = $scope.list2.indexOf(column);
  $scope.removedColumn = $scope.list2.splice($scope.indexOfColumn, 1)
  console.log($scope.indexOfColumn, 'column index', $scope.removedColumn)
}

And here is the corresponding HTML markup:

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

For further reference, you can view my implementation on this fiddle link: http://jsfiddle.net/soumyagangamwar/9ra59ptb/

In summary, the functionality involves ensuring that selecting or deselecting an element updates the contents of both lists appropriately. If any element is deselected, it should reappear in both lists. Any guidance on refining this solution would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

If you want to avoid using ngChange directives, consider creating a custom filter in AngularJS.

Start by making the ngModel directive more functional:

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

To filter out selected items from one select and show them in another, utilize a custom filter within the ngOptions directive like this:

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

Instead of using the long name onlyNotSelectedCouldShowHere, simplify it to just notSelected in the actual code.

To implement this functionality, create a custom filter called notSelected as part of your myApp module:

myApp
  // Custom filter creation
  .filter('notSelected', function(){
    return function(list, target) {
      if (target === undefined) return list;

      var filtered = list.filter(function(item) {
        return item.columnName !== target.columnName;
      });
      return filtered;
    }
  });

After realizing that arguments need to be passed to the filter (yaxis for x select and xaxis for y select), update the HTML accordingly:

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

For further information on AngularJS filters, check out an informative post titled Everything about custom filters in AngularJS by Todd Motto.

Update on 8/7/16: Modification made to show full list when value="" is selected.

myApp.filter('notSelected', function(){
  return function(list, target) {
    if (target === undefined || target === null) return list;
    
    var filtered = list.filter(function(item) {
      return item.columnName !== target.columnName;
    });
    return filtered;
  }
});

View the updated jsfiddle here.

Answer 2

If you want to avoid using ngChange directives, consider creating a custom filter in AngularJS.

Start by making the ngModel directive more functional:

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

To filter out selected items from one select and show them in another, utilize a custom filter within the ngOptions directive like this:

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

Instead of using the long name onlyNotSelectedCouldShowHere, simplify it to just notSelected in the actual code.

To implement this functionality, create a custom filter called notSelected as part of your myApp module:

myApp
  // Custom filter creation
  .filter('notSelected', function(){
    return function(list, target) {
      if (target === undefined) return list;

      var filtered = list.filter(function(item) {
        return item.columnName !== target.columnName;
      });
      return filtered;
    }
  });

After realizing that arguments need to be passed to the filter (yaxis for x select and xaxis for y select), update the HTML accordingly:

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

For further information on AngularJS filters, check out an informative post titled Everything about custom filters in AngularJS by Todd Motto.

Update on 8/7/16: Modification made to show full list when value="" is selected.

myApp.filter('notSelected', function(){
  return function(list, target) {
    if (target === undefined || target === null) return list;
    
    var filtered = list.filter(function(item) {
      return item.columnName !== target.columnName;
    });
    return filtered;
  }
});

View the updated jsfiddle here.

Is there a way to delete an element from a dropdown array in list2 after selecting an element from the dropdown list1 in Angular JS?

Answer №1

Similar questions

Utilizing an 'onclick' confirmation function with PHP in HTML

The attempt to update several partial views using Jquery, MVC, and Json is currently malfunctioning

Express API encounters an issue with multer and body-parser as req.file is undefined

What is the top choice for creating a cutting-edge front-end web module?

"Troubleshooting issue with jQuery failing to identify PHP variable within an if

Display the mobile app download prompt exclusively on mobile devices and tablets

Steps for updating a value in a JSON file using PHP

What causes a significant influx of packages each time I execute the command `npm install`?

Utilize FormData by passing it to a separate function and then utilizing it

Steps to Verify if Cookie is Turned Off in a Next.js Application

Having trouble with your Facebook pixel setup - is it a coding issue?

There was an uncaught error in AngularJS stating that the URL in the HTTP request configuration must be a string

Efficiently calculating multiple sums of objects with d3.js

{ error: unable to update backend column due to invalid input syntax for integer: "undefined"}

Updating only partial sections of a mongo object

Animating Text Around a Circle Using HTML5 Canvas

Guide to running code repeatedly in node.js

Utilize AJAX response to mark checkbox as checked

Accessing a specific JSON field in the JavaScript console

Understanding the Process of Accessing Array Values in Immutable.js