I am trying to ensure a user selects a value from a select box before submitting the form.
This works correctly with static options; it however fails when populating the options via a model using ng-options
Examplehttp://plnkr.co/edit/wRqSCNskLo5c48jy4nQf
I am using AngularJS 1.2.9
Thank you in advance.
In your example changing the data bound select to the following fixes the required directive. I'm not sure why exactly.
<select ng-model="selectedValue1" ng-options="opt for opt in ['Mazda2','Maxda3']" required>
<option></option>
</select>
You can also try ng-required="true" (it works on the latest AngularJS, not sure for 1.2.x).
<select ng-model="selectedValue1" ng-options="opt for opt in ['','Mazda2','Maxda3']" ng-required="true"></select>
Related
I was using Bootstrap select for search and multiple select but the problem is when i am using $scope object in ng-repeat for options it's not working . I have given my codes below .
<select name="name" ng-model="city.id" class="selectpicker" data-live-search="true" ng-options="o._id as o.name for o in stateList" ></select>
<select name="name" ng-model="city.id" class="selectpicker" data-live-search="true" ><option ng-repeat="option in stateList" value="{[{option._id}]}">{[{option.name}]}</option>
I have used both options and ng-option methods but still the object didn't show up ...
This is my state object that need to be repeated in select...
$scope.stateList = [{"_id":"1","name":"www"},{"_id":"2","name":"bgg"}]
Hope you understand my problem and if you need any more details
pls leave a comment and i'm waiting for your suggestions...
I was having issues as well, but using nya-bootstrap-select
http://nya.io/nya-bootstrap-select/#!/
fixed it. It has something to do with bootstrap select's use of jQuery which doesn't always play nice with angular...this is written in Angular for use with Angular, so its more compatible...
I am trying to show tags in a Bootstrap select combobox. However, ng-repeat is not populating the options. After some research, I believe I need to write a directive for this, because Bootstrap takes the options and makes a list out of them before Angular adds the options. But I don't know what writing a directive involves.
<select class="combobox form-control" ng-model = "tags.repeatSelect">
<option ng-repeat = "tag in tags.tagNames" value = "{{tag.string}}"> {{tag.string}} </option>
This may solve your problem.
<select data-ng-model="modelValue" class="form-control" data-ng-options="item.string for item in tags.tagNames">
</select>
I would like to check, previously I was using angularjs 1.3.15 and everything works fine. I have a country dropdown selection which in html looks like this
<select class="form-control ctm-form" ng-model="uProfile.country">
<option value=null>----- Please Select -----</option>
<option ng-repeat="country in countries" value="<%country.country_id%>"><%country.name%></option>
</select>
and when I load the page the selected value can be displayed properly. Recently I have upgraded to Angular 1.4.4 and i started to notice this selective dropdown box do not display the selected values but instead when I inspect the code it returns me with value like ? number:132 ? as seen in the image below
When i was using Angular 1.3.15 the ng-model will just return the value 132 but why is it when i upgraded to 1.4.4 the result became ? number:132 ? ? What have I done wrong?
I can't leave a comment...
But this is a duplicated question. Here is the Same question.
I'm using Angular $resource and having a simple form with some inputs and a multiple select, for example:
<select ng-model="item.selectedItems" multiple>
<option value="bla">Bla</option>
<option value="bla2">Bla2</option>
</select>
Now when I selected all the items in the multiple select and do item.$save in my code on submit, the url called is
http://domain.com/api/items?field1=text&selectedItems=bla&selectedItems=bla2
However, I want this url to be
http://domain.com/api/items?field1=text&selectedItems[]=bla&selectedItems[]=bla2
just like I was having with a regular
<select name="selectedItems[]">
Does anyone know how to do this? Using ng-model="item.selectedItems[]" didn't work.
I'm using Slim Framework as backend and it just replaces the selectedItems parameter with the last in the url.
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 :)