JSFiddle - React, Tailwind, and code Playground

by dandoyon

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <select ng-model="selectedIds[0]"  ng-options="currOption.id as currOption.value for currOption in myObj | myfilter:selectedIds:'0'"></select>
        <select ng-model="selectedIds[1]"  ng-options="currOption.id as currOption.value for currOption in myObj | myfilter:selectedIds:'1'"></select>
    
    <br>
    {{selectedIds}}
</div>

JavaScript

function MyCtrl($scope)
{
    $scope.selectedIds = ["C", "E", "F", "G"];
    
    $scope.myObj = [{
        id: "A",
        value: "AAA"
    },
    {
        id: "B",
        value: "BBB"
    },
    {
        id: "C",
        value: "CCC"
    },
    {
        id: "D",
        value: "DDD"
    },
    {
        id: "E",
        value: "EEE"
    },
    {
        id: "F",
        value: "FFF"
    },
    {
        id: "G",
        value: "GGG"
    }]
}

angular.module("myApp", [])
    .filter("myfilter", function () {
        
    function isIdInUse(selectedIds, id)
    {
        var retVal = false;
        angular.forEach(selectedIds, function (currentSelectedId) {
            if (id == currentSelectedId)
            {
                retVal = true;
            }
        });
        return retVal;
    }
    
    return function(allOptions, selectedIds, index) {
        
       var newOptions = [];
        
        angular.forEach(allOptions, function (currentOption) {
            
            if (currentOption.id == selectedIds[parseInt(index)] || !isIdInUse(selectedIds, currentOption.id))
            {
                newOptions.push(currentOption);
            }
        });
        
        return newOptions;
    };
    });