1

I have three dropdowns:-

<select clas="col-md-3" ng-model="a.userList"
        ng-options="p as p.users for p in List"
        ng-change="selectValues(a.userList)">
        <option value="">Select</option>
</select>
<select clas="col-md-3" ng-model="a.userCode" id="dropdown1">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
</select>
<select clas="col-md-3" ng-model="a.userId" id="dropdown2">
        <option>X</option>
        <option>F</option>
        <option>M</option>
</select>

what I want is when user select AX then from other two dropdowns A and X got selected respectively and all the other values got removed from that two dropdowns.

My directive Code:-

(function () {
    'use strict';
    angular.module('myApp.components')
        .directive('user', user);

    user.$inject = ['$http', '$timeout', 'ApiServices'];

    function user($http, $timeout, ApiServices) {
        return {
            restrict: 'EA',
            scope: {

            },
            link: function (scope, el, attrs) {
                 scope.a = {};

                $('#user').on('hide.bs.modal', function () {
                    scope.a = {};
                });

                $('#user').on('shown.bs.modal', function () {

                    scope.getAllUserList = function(){
                        scope.List = [];
                        ApiServices.getAllUserList().then(function (response) {
                            scope.List = response.data;
                        });
                    }
                        scope.getAllUserList();

                });

                scope.selectValues = function(userList){
                    switch(userList){
                        case "user1" : scope.a.userCode = "A";
                                            $('dropdown1').find('option[value!="'+scope.a.userCode+'"]').remove();
                                            scope.a.userCode = "X";
                                            $('dropdown2').find('option[value!="'+scope.a.userId+'"]').remove();
                                    break;
                        case "user1" : scope.a.userCode = "B";
                                            $('dropdown1').find('option[value!="'+scope.a.userCode+'"]').remove();
                                            scope.mlmScrip.segment = "X";
                                            $('dropdown2').find('option[value!="'+scope.a.userId+'"]').remove();
                                    break;
                        case "user1" : scope.a.userCode = "C";
                                            $('dropdown1').find('option[value!="'+scope.a.userCode+'"]').remove();
                                            scope.mlmScrip.segment = "X";
                                            $('dropdown2').find('option[value!="'+scope.a.userId+'"]').remove();
                                    break;
      //and so on

                    }         
                }


            //Link function ends below
            },
            templateUrl: 'js/components/folder/info.html'
        };
    }

})();

On the above code I am able to select the particular value which I want to select but not able to remove all the other values from the two dropdowns. My jquery code is not working.I know the code is correct but I think I place it wrong.Can anyone point me out the error.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
sg055322
  • 161
  • 2
  • 15

0 Answers0