Comments (12)
+1
from angular-bootstrap-select.
I find out temporary solution for me.
I don't know how I can create watch on ng-options, so I used another way to refresh it.
Step1:
Created another attribute called 'options', assign it an object which you are looping in 'ng-options'.
Example: ng-options='item.id as item.name in for item in users' options='users'
Step2:
In angular-bootstrap-select.js file, add watch on this 'options' in function called selectpickerDirective.
Example: function selectpickerDirective($parse, $timeout) { ....
add code after ngDisabled watch:
if (attrs['options']) {
scope.$watch(attrs['options'], function (value) {
if (value) {
scope.$applyAsync(function () {
element.selectpicker('refresh');
});
}
}, true);
}
Whenever you will update ng-options, it will get refreshed.
from angular-bootstrap-select.
I wanted the same behaviour, so i looked into the code (test/select.js) and....
If you want to "watch" your option's value, use "track by" in ng-options
example:
<select selectpicker
data-width="100%"
data-style="btn-select" data-none-selected-text=""
ng-model="filter.value"
ng-change="updateFilters()"
ng-options="option.value as option.label for option in options track by option.value"></select>
Hope it'll help
from angular-bootstrap-select.
@frlinw thanks you're a life saver
from angular-bootstrap-select.
Hi @frlinw,
Thanks for the solution, but it will only work when you have any option selected.
Let say, I have a screen with 2 selects A & B. A is static select and based on it's selection I am updating B dynamically. When page loads, if I will first select option in B and then in A, it will work. When I will first select option in A and try to build B dynamically, it will update option values but you can't see it until you will not select option in B with pre-loaded values. After selecting pre-loaded value in B, it will display updated options in B.
from angular-bootstrap-select.
It's a particular use case, maybe there is a better way. (jsfiddle example ?)
from angular-bootstrap-select.
+1
from angular-bootstrap-select.
This directive overrides the $render method which causes the ng-options to never get rendered.
By calling the previous render as well, things are solved:
var superRender = ngModel.$render;
ngModel.$render = function () {
superRender();
scope.$evalAsync(function () {
element.selectpicker('refresh');
});
}
from angular-bootstrap-select.
@nelisbijl +1. Works for me.
from angular-bootstrap-select.
@bmanturner , @nelisbijl
i dont know where to place that code, i placed in my app.js , but not working
from angular-bootstrap-select.
@yugandharBellam, you need to put this code inside the source code of angular-bootstrap-select.
I no longer use this package
By then I should have created a pull request but my knowledge of Git prevented me from doing so
from angular-bootstrap-select.
Thanks
from angular-bootstrap-select.
Related Issues (20)
- Question : Why does not default selectpicker work?
- 0.1.0-rc2 files under build folder is not built from src?
- Still have 'Nothing Selected' when trying to use Ng-options HOT 1
- Up/Down keys do not work with options list
- bower package is not published
- Default picker choice? HOT 1
- selectpicker directive not in README file
- Significant slow down with a lot of options HOT 1
- Multi render
- syntax err line 8 HOT 1
- Doesn't support track by in ng-option HOT 1
- dropdown-toggle doesn't close when used within ng-form
- Directive is duplicating the dropdown boxes in a ng-table column HOT 8
- Support for optgroups?
- Is there a support for options with search? HOT 1
- with ng-model twice selct boxes HOT 1
- ng-options support in angular 1.4
- Livesearch to filter data by mapping string in the begining
- Click event not triggered on document
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-bootstrap-select.