plnkr.co/edit/66oHtYqc66BBZQWua5el?p=preview
you can see in the link that its aint working and mark icon is not
showing too
I think you are trying to create a bootstrap multiple select box.
If so, the reason you may be running into issues is because the current class you are using (selectPicker) would be incorrect. Your code should look like this:
<select multiple id="selectpicker" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
So instead of using the class to target with jQuery, as I believe you are trying to do, use the id value instead. $('#selectpicker')
UPDATE:
I tried using the files you were linking to, but couldn't get them to work (not sure what the issue there was). So instead, I used the cdn links and it seems to be working great now.
Here's a link to the working version: http://plnkr.co/edit/IIvTMLACZHXvhsbRXrkD?p=preview
Related
We are attempting to resolve a maddening bug in IE 10 in which the option label of the selected option does not get rendered for an Angular <select>. Instead, the label of the option appears as {{option}}, implying that the directive could not be resolved. What is worse is that this problem does not happen in IE 11 or later, or Chrome. Here is the relevant code:
The HTML:
<select class="settings-select-box" name="LOCATION_UPDATE_FREQUENCY"
id="LOCATION_UPDATE_FREQUENCY"
data-ng-model="configurations.LOCATION_UPDATE_FREQUENCY">
<option data-ng-repeat="option in frequency" value="{{option}}">{{option}}</option>
</select>
In the controller JS code we define frequency as a static array, since the choices will never change:
$scope.frequency = ["Never","Daily","Weekly","Monthly"];
The scoped variable used for the model is configurations.LOCATION_UPDATE_FREQUENCY, and is defined using a value from the database. Persisting to the database works on IE 10 and other browsers, which means that binding from the UI to the server appears to be working without issue.
What is really strange about this bug is that the correct option still gets selected in IE 10, but the label is broken or not being rendered properly.
Here is a screen capture to further illustrate the problem:
According to offical documentation you should use "ng-value"
https://docs.angularjs.org/api/ng/directive/ngValue
<select class="settings-select-box" name="LOCATION_UPDATE_FREQUENCY"
id="LOCATION_UPDATE_FREQUENCY"
data-ng-model="configurations.LOCATION_UPDATE_FREQUENCY">
<option data-ng-repeat="option in frequency" ng-value="{{option}}">{{option}} </option>
</select>
Ever since I upgraded from AngularJS 1.3.15 to 1.4.8 I'm getting an empty option added to all my select2 uses.
I've tried what is suggested here: Why does AngularJS include an empty option in select?
and in other questions, but couldn't make it work for me.
Here is a plunkr of my issue: http://plnkr.co/edit/zrYCDbtSVHNt3tRZsQza?p=preview
As you can see, an empty option is added, after selecting any of the 2 values there, the empty option disappears.
The relevant HTML:
<select ui-select2 ng-model="cqData.dataObjects.Mode.Value">
<option value="structured" localize>Structured Query</option>
<option value="advanced" localize>Advanced Query</option>
</select>
P.S. I know ui-select2 is deprecated, but its an existing project and I'm unable at the moment to upgrade it.
Try to set default value in controller like this:
$scope.cqData.dataObjects.Mode.Value = $scope.cqData.dataObjects.Mode[0].Value;
Its working fine.
I have a web application to write and in the majority of cases I have a 1 to 1 relationship between objects of Class A and objects of Class B, so I hop from one to the other. Sometimes it is 1 to many, in this case I need to display a popup menu and let the user take a selection from the menu and then I will navigate as if it was 1 to 1.
All this is brand new code so no legacy JavaScript/J Query exists.
I seldom write web code but from I have learnt recently Angular appears to be an architectural correct way to do things instead of writing my own JavaScript I want to use the correct Angular method.
But I need a start point. I was looking for a Angular directive and I can see things like input[email] and input[month] but I cannot see input[dropdown] or input[popup].
Can someone please steer me in the right direction? Thanks.
For dropdowns you want to use html-select. To dynamically add values to the dropdown use ng-options with the html select.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
i want to use ons-select in my app. and i have added it into my code, then debug the app, but the emulate show nothing. by the way, webstom alert me that 'can not find the ons-select tag'.
so how to use ons-select in onse-ui-1.3.1?
Any help is really appreciated.
The code:
<ons-select ng-model="mediaTypes.type" ng-change="search()">
<option value="all" selected>All Media</option>
<option value="musicVideo">Video</option>
<option value="movie">Movie</option>
<option value="music">Music</option>
<option value="podcast">Podcast</option>
<option value="tvShow">TV Show</option>
</ons-select>
I think what you are looking for is ons.platform.select() method. However it is a new feature added in Onsen 1.3.2 that is currently under development. If you cannot wait until it is released you can use the version in Onsen UI's master branch. Hope it helps!
Edit:
After you updated your code I realised you are looking for something different, not ons.platform.select(). Looks like the tag <ons-select> was removed from Onsen UI. Normal HTML <select> should be enough.
I am using bootstra-multiselect along with angularjs in my project. During testing what i found is, the "selected" attribute name is getting conflict between these two. Following is my HTML markup for my multi select directive.
<select id="example-getting-started" multiple="multiple" name="multiselect[]" data-dropdownmultiselect>
<option data-ng-repeat="option in options" value="{{getOptionId(option)}}" data-ng-attr-selected="{{isOptionSelected(option)}}" data-ng-bind-template="{{option.name}}"></option>
</select>
What i found is, data-ng-attr-selected="{{isOptionSelected(option)}}" is not getting compiled by angularjs. Seems like angular js "ng-selected" directive is getting applied instead of my required normal attribute.
How can solve this? I don't want to change the code or either bootstra-multiselect or angularjs to avoid future maintability. Is there something in Angularjs to stop running its predefined "ng-selected" directive?
Following is plunker code to demo this problem
Angularjs and conflict of directive name with other module
You could use ng-selected="expression" which will add selected attribute with selected value in the current select option, I don't understand why you are doing it using ng-attr while you can control that using ng-selected="isOptionSelected(option)"
Markup
<select id="example-getting-started" multiple="multiple" name="multiselect[]" data-dropdownmultiselect>
<option data-ng-repeat="option in options" value="{{getOptionId(option)}}"
ng-selected="isOptionSelected(option)"
data-ng-bind-template="{{option.name}}"></option>
</select>
Working Plunkr
Let me know if you want anything else on it, Thanks :)