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 :)
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>
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 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.
The following is something that I'd like to accomplish with Angular but I'm not sure if it's even possible.
My form would be comprised of 3 views/templates each with it's own controller. Two views are fixed, the third view needs to by dynamically loaded based on a value selected from a dropdown in one of the fixed views. The view and controller name would be derived based on the selected value. If possible I'd like to dynamically load the javascript for the controller of the selected view as well.
I heard some rumblings about this possibly in Angular 2.0 but I'm not exactly sure how to approach it.
Any thoughts? I'm not stuck with Angular so if another framework would work better in this case please let me know.
Unless you are talking about ng-route and $routeProvider, you can have it with ng-include.
By setting ng-include as dynamic, your html will be downloaded and replace the section.
NOTE: however, ng-include does not allow to have script tag in it.
You need to go around using your own directive.
This is the example of using ng-include,
http://plnkr.co/edit/nlGVNfSpJOjIfIXxpEKc?p=preview
<body ng-app ng-init="dynamic='1.html'">
<select ng-model="dynamic">
<option value="1.html">dynamic 1</option>
<option value="2.html">dynamic 2</option>
<option value="3.html">dynamic 3</option>
</select>
dynamic: {{dynamic}}
<div>Fixed 1</div>
<div>Fixed 2</div>
<div ng-include="dynamic"></div>
</body>