Multiple Select Dropdown Not Working With Ng-Option

Multiple ng-options dropdowns not working properly?

You have to assign different scope on each dropdown. Having same ng-model on each select tag then one overrides the other.

e.g. :

<select  ng-model="empInfo1" ng-options="emp.company_name for emp in names">
<select  ng-model="empInfo2" ng-options="emp.company_name for emp in names">

Get new value selected in ng-option on change in a multiple select

You cannot achieve this using ng-change because you need to keep track of what was the last selected option. You have to $watch your filter.types which is an array and then based on new value and old value you can decide what to do.

$scope.$watch('filter.types', function(newVal, oldVal) {
      if (newVal.length > oldVal.length) { //Updating only on selecting 
        var lastSelectedOption = [];
        lastSelectedOption = $scope.diff(newVal, oldVal);
        if (lastSelectedOption[0] == 'All') { 

          var i = newVal.length;
          while (i--) {
            if (newVal[i] != 'All') {
              newVal.splice(i, 1); //Deleting other options
            }
          }
        } else if (newVal.indexOf('All') > -1) { 
          newVal.splice(newVal.indexOf('All'), 1); //Deleting 'All' option
        }
      }

    });

Working JSFiddle link for your reference. Good luck!

AngularJS : ng-model not working in multiple drop down

I updated your plunker to work:

https://plnkr.co/edit/4sJHHaJPEuYiaHjdnFBp?p=preview

You weren't defining what the model was when you were redefining the options menus (side note: you should leverage underscore.js's difference function within a filter to create the appropriate display options dynamically)

Anyway, in your addRow() function, I changed it from this:

if(val=== 'TestB') {
   $scope.data1 = {
        model: null,
        availableOptions: [
            { name: 'TestA'},
            { name: 'TestC'},
            { name: 'TestD'}

        ]
    };
}

to this:

if(val=== 'TestB') {
   $scope.data1 = {
        model: 'TestB',
        availableOptions: [
            { name: 'TestA'},
            { name: 'TestC'},
            { name: 'TestD'}

        ]
    };
}

Let me know if this helps

UPDATE:

I recreated the functionality from scratch because I think you were overthinking things. All that is needed here is very simple ng-repeat, ng-options, and ng-model bindings.

<tr ng-repeat="r in rows track by $index">
     <td> 
        <select ng-model="r.name" 
               ng-options="option.name as option.name for option 
                                       in availableOptions">
            <option value="">Select Value</option>
        </select>
     </td>
     <td> 
         <input type="button" ng-click="addRow()" value="Add">
     </td>
     <td>
         <input type="button" ng-click="deleteRow($index)" 
             value="Delete">
    </td>
</tr>

and for the angular

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.rows = [{name:""}];

  $scope.addRow = function(){
    $scope.rows.push({name:""});
  }

  $scope.availableOptions = [
                { name: 'TestA'},
                { name: 'TestB'},
                { name: 'TestC'},
                { name: 'TestD'}

            ];

  $scope.deleteRow = function(index){
    $scope.rows.splice(index,1);
    }
});

I didn't throw in the difference thing yet, but it should be easy.

Angularjs - MultiSelect dropdown options not displayed in IE

You can use ng-options instead of doing an ng-repeat on the option element itself. The general format for this is [option value] as [option text] for [option] in [list of options].

.html

<select multiple name="multiCountries" ng-model=vm.country.countryList" ng-options="option.value as option.label for option in vm.country.filteredList"></select>

Ng-options in bootstrap-select doesn't work

You are using a jQuery plugin in AngularJS, you can use it by calling the function in a directive binded with the element as shown below:

HTML:

<select class="selectpicker" bootstrap-selectpicker data-ng-model="modelValue" multiple="" data-actions-box="true">
 <option>Mustard</option>
 <option>Ketchup</option>
 <option>Relish</option>
</select> 

Directive:

app.directive('bootstrapSelectpicker'), function(){
var bootDirective = {
    restrict : 'A',
    link: function(scope, element, attr){
        $(element).selectpicker();
    }         
};
   return bootDirective;
});

But i would recommend using Angularjs based dropwdowns, take a look at following plugin.

http://isteven.github.io/angular-multi-select/#/main

http://angular-ui.github.io/ui-select/

http://ngmodules.org/modules/angular-bootstrap-multiselect
https://github.com/dotansimha/angularjs-dropdown-multiselect

Hope this helps :)

---

Related Topics