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
Navbar Menu Dropdown Not Working (Won't Drop Down When Clicked)
What Does Enctype='Multipart/Form-Data' Mean
What Are the Implications of Using "!Important" in Css
How to Change the Style of the Title Attribute Inside an Anchor Tag
Why Doesn't Nth-Of-Type/Nth-Child Work on Nested Elements
How to Disable a Link Using Only Css
How to Prevent Autoplay in Iframe HTML Content
Difference Between Id and Name Attributes in Html
Css - How to Have Swiper Slider Arrows Outside of Slider That Takes Up 12 Column Row
How to Make a Div 100% Height of the Browser Window
Websockets Vs. Server-Sent Events/Eventsource
How to Add Some Non-Standard Font to a Website