Utilizing ng-options within an ng-repeat to filter out previously chosen options

Question

Utilizing ng-options within an ng-repeat to filter out previously chosen options

Facing a simple problem and seeking a solution.

I am using ng-repeat to dynamically create select boxes with ng-options displaying the same values.

The ng-repeat is used to iterate through model options.

<div data-ng-repeat="condition in model.conditions">
    <label>{{condition}}</label>
    <select data-ng-model="selectedValue"
            ng-options="item.name for item in optionList">
    </select>
</div>

This represents the condition model:

$scope.model = 
    {
        conditions:
        [
            {id:1,name:"CONDITION_ONE"},
            {id:2,name:"CONDITION_TWO"}
        ]
    }

This corresponds to the list of options:

$scope.optionList = 
    [
        {id:1, name:"OPTION_ONE"},
        {id:2, name:"OPTION_TWO"},
        {id:3, name:"OPTION_Three"}
    ];

Image for illustration purposes only:

I aim to enable the removal of selected items from one select box when chosen, in order to prevent duplicates across select boxes.

Is there a way to achieve this functionality using angularJS?

javascript angularjs

Answer 1

Answer №1

Utilize the ng-repeat filter

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<div data-ng-repeat="condition in model.conditions">
    <label>Remove Id {{condition.id}} from  List </label>
<select ng-model="selectedName" ng-options="item.name for item in filter(condition)">
</select>

</div></div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.optionList = 
    [
        {id:1, name:"OPTION_ONE"},
        {id:2, name:"OPTION_TWO"},
        {id:3, name:"OPTION_Three"}
    ];
    
    $scope.model = 
    {
        videos:
        [
            {id:1,name:"CONDITION_ONE"},
            {id:2,name:"CONDITION_TWO"}
        ],
        conditions : [
        {id:1, name:"OPTION_ONE"},
        {id:2, name:"OPTION_TWO"},
        {id:3, name:"OPTION_Three"}
    ]
    };
    
    $scope.filter = (item)=>{
   return $scope.optionList.filter(list => list.id !== item.id);
    }
});
</script>

</body>
</html>

Answer 2

Utilize the ng-repeat filter

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<div data-ng-repeat="condition in model.conditions">
    <label>Remove Id {{condition.id}} from  List </label>
<select ng-model="selectedName" ng-options="item.name for item in filter(condition)">
</select>

</div></div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.optionList = 
    [
        {id:1, name:"OPTION_ONE"},
        {id:2, name:"OPTION_TWO"},
        {id:3, name:"OPTION_Three"}
    ];
    
    $scope.model = 
    {
        videos:
        [
            {id:1,name:"CONDITION_ONE"},
            {id:2,name:"CONDITION_TWO"}
        ],
        conditions : [
        {id:1, name:"OPTION_ONE"},
        {id:2, name:"OPTION_TWO"},
        {id:3, name:"OPTION_Three"}
    ]
    };
    
    $scope.filter = (item)=>{
   return $scope.optionList.filter(list => list.id !== item.id);
    }
});
</script>

</body>
</html>

Utilizing ng-options within an ng-repeat to filter out previously chosen options

Answer №1

Similar questions

Angular facilitates the seamless uploading of files to S3

The error message "item is not defined in nodejs" indicates that the variable

Is it possible to verify if each value satisfies a condition within a Javascript function?

Arranging the data in the table by alternating rows using Datatables

The application monitored by nodemon has halted - awaiting modifications in files before restarting the process

Steps for dynamically loading the correct pane without having to refresh the header, footer, or left navigation

Tips for storing a JSON file with GridFS

mapStateToProps was invoked, however componentDidUpdate did not trigger

Is there a way to set columns as initially hidden in MaterialTable?

Intellij2016 is issuing warnings for the sass use of the :host selector in Angular2 code

How to change the state using an object as an argument in the useState hook within a function

Placeholder for empty values in Angular UI mask

Dealing with errors in Express.js within the service or controller layers

The proper method for retrieving FormData using SyntheticEvent

Make sure to include the @ symbol before "angular" in the package.json file when setting

The onclick function is malfunctioning when attempting to use the Windows Phone app in Visual Studio 2015

choose a unique jQuery id without any duplicates

What advantages can be gained from having multiple package.json files within a single application?

Express callback delaying with setTimeout

Embed a service within an Angular 1.5 component