I am using Select2 with its angular interface for a select form like
<select ui-select2 ng-model='thing' data-placeholder='Options' id='form1>
<option value=''></Option>
<option value='1'>Option 1</Option>
<option value='2'>Option 2</Option>
In my controller, I have the line
$('#form1').select2();
to enable Select2. However, when I run this, I get the error
query function not defined for Select2 s2id_form1
and nothing shows up in the input box. I've tried to put in a query function in the initializer, but nothing is working. When I do define a query function, like
$('#form1').select2({query: function (query) {return 0;}});
It says that I can't put a query option in a select form. How can I fix this error?
Well you're bypassing the AngularUI Select2 code by invoking $('#form1').select2() - that's just the regular jQuery select2 method.
You want to setup your select2 options within an object scoped to your controller
$scope.select2setup = {...}
Then in your html
<select ui-select2="select2setup"....>
It's all pretty well documented # https://github.com/angular-ui/ui-select2
Related
I have started leaning AngularJS.
In AngularJS if we have to initialize an element lets take an example of select:
<select id="s1" ng-model="vsrc" ng-init="vsrc='a.mp4'">
<option value="a.mp4">First video</option>
<option value="b.mp4">Second video</option>
</select>
why initialization of vsrc='a.mp4' in ng-init is required, when I was giving its value like ng-init='a.mp4' it was not working I had to give like ng-init="vsrc='a.mp4'". In normal HTML statement we are directly giving default option by providing value='a.mp4'
<select id="s1" ng-model="vsrc" ng-init="vsrc='a.mp4'"> /*ng-init used to initialize a **variable** before html render, it is a directive which search left and right value always*/
<option value="a.mp4">First video</option> /*value is here as json object {"value":"a.mp4"}*/
<option value="b.mp4">Second video</option>
</select>
take a look over here about ng-init directive
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 :)
I am trying to bind 2 properties to a object. The DocumentTypeId, DocumentTypeName. I am using ng-repeat in a select box, i could not get it to work with ng-options. This hack is causing me problems. I have ngstorage setup in my project, I can get the DocumentTypeName from the $rootScope, problem is I cant execute the function correctly.The parameter in the ng-change function is undefined. I would prefer to get rid of the hack and use ng-options, if not then I just need this to work. open to suggestions, thanks
plunker
<select class="form-control" ng-model="model.documentTypeId" ng-change="selectDocumentType(docType)">
<option ng-repeat="docType in docTypes" title="{{docType.DocumentTypeName}}" ng-selected="{{docType.DocumentTypeId == model.DocumentTypeId}}" value="{{docType.DocumentTypeId}}">
{{docType.DocumentTypeName}}
</option>
</select>
I've made it work with ng-options, like you said, it's best if you used that instead of a hack.
<select class="form-control" ng-model="model.documentTypeId" ng-change="test()"
ng-options="docType.DocumentTypeId as docType.DocumentTypeName for docType in docTypes" title="{{docType.DocumentTypeName}}" ng-selected="{{docType.DocumentTypeId == model.DocumentTypeId}}" value="{{docType.DocumentTypeId}}">
{{docType.DocumentTypeName}}
</select>
And the ng-change is just a test function in the controller so you see it works:
$scope.test = function (docType) {
console.log($scope.model.documentTypeId);
};
Working Plunker
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>