joaoneto / angular-bootstrap-select Goto Github PK
View Code? Open in Web Editor NEWDEPRECATED DON'T USE - Directive to wrap bootstrap-select
DEPRECATED DON'T USE - Directive to wrap bootstrap-select
html:
<-div ng-repeat="f in filters">
<-select ng-model="f.v" ng-options="o.d for o in f.o" m-select data-live-search="true"> </-select>
<-/div>
js:
$scope.filters = [
{n:'A',o:[{d:"A1",v:'1'},{d:"A2",v:'2'},{d:"A3",v:'3'}],v:2},
{n:'B',o:[{d:"B1",v:'1'},{d:"B2",v:'2'},{d:"B3",v:'3'}],v:2},
{n:'C',o:[{d:"C1",v:'1'},{d:"C2",v:'2'},{d:"C3",v:'3'}],v:2}
];
the option will not be initiated.
Attempt of installing 0.1.0-rc2 via Bower causes the following error:
bower install
bower angular-bootstrap-select#0.1.0-rc2 not-cached git://github.com/joaoneto/angular-bootstrap-select.git#0.1.0-rc2
bower angular-bootstrap-select#0.1.0-rc2 resolve git://github.com/joaoneto/angular-bootstrap-select.git#0.1.0-rc2
bower angular-bootstrap-select#0.1.0-rc2 download https://github.com/joaoneto/angular-bootstrap-select/archive/v0.1.0-rc2.tar.gz
bower angular-bootstrap-select#0.1.0-rc2 extract archive.tar.gz
bower angular-bootstrap-select#0.1.0-rc2 error Invalid Version: 0.1.0rc2
Stack trace:
TypeError: Invalid Version: 0.1.0rc2
at new SemVer (/usr/local/lib/node_modules/bower/node_modules/semver/semver.js:273:11)
at compare (/usr/local/lib/node_modules/bower/node_modules/semver/semver.js:460:10)
at Object.neq (/usr/local/lib/node_modules/bower/node_modules/semver/semver.js:504:10)
at GitHubResolver.GitResolver._savePkgMeta (/usr/local/lib/node_modules/bower/lib/core/resolvers/GitResolver.js:224:56)
at GitHubResolver._savePkgMeta (/usr/local/lib/node_modules/bower/lib/core/resolvers/GitHubResolver.js:131:53)
at _fulfilled (/usr/local/lib/node_modules/bower/node_modules/q/q.js:787:54)
at self.promiseDispatch.done (/usr/local/lib/node_modules/bower/node_modules/q/q.js:816:30)
at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/bower/node_modules/q/q.js:749:13)
at /usr/local/lib/node_modules/bower/node_modules/q/q.js:557:44
at flush (/usr/local/lib/node_modules/bower/node_modules/q/q.js:108:17)
Console trace:
Trace
at StandardRenderer.error (/usr/local/lib/node_modules/bower/lib/renderers/StandardRenderer.js:82:17)
at Logger.<anonymous> (/usr/local/lib/node_modules/bower/bin/bower:110:22)
at Logger.emit (events.js:95:17)
at Logger.emit (/usr/local/lib/node_modules/bower/node_modules/bower-logger/lib/Logger.js:29:39)
at /usr/local/lib/node_modules/bower/lib/commands/index.js:40:20
at _rejected (/usr/local/lib/node_modules/bower/node_modules/q/q.js:797:24)
at /usr/local/lib/node_modules/bower/node_modules/q/q.js:823:30
at Promise.when (/usr/local/lib/node_modules/bower/node_modules/q/q.js:1035:31)
at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/bower/node_modules/q/q.js:741:41)
at /usr/local/lib/node_modules/bower/node_modules/q/q.js:557:44
System info:
Bower version: 1.3.12
Node version: 0.10.32
OS: Darwin 13.4.0 x64
Bom dia João, tudo bem?
Seguinte cara, eu estou precisando fazer um bom uso do bootstrap-select, ao ponto de apresentar opções em uma forma de hierarquia. Usando o "data-content" eu consigo a seguinte apresentação (primeiro select da imagem)
Porém, o que quero é o segundo select da imagem. A diferença é que elementos que estão no nível 0 da hierarquia (são as raizes) não podem apresentar a imagem do lado. No entanto, estou com problemas com o parse do AngularJS no "data-content". Abaixo segue o template que uso para a minha diretiva:
<select class="selectpicker span10" multiple ng-if="config.hierarchy">
<option ng-repeat="opcao in config.opcoes" ng-style="{'padding-left': opcao.profundidade*15 + 'px'}"
data-content='<span><i ng-if="opcao.profundidade" class="icone_tpl_select2 profund_{{opcao.profundidade}}"></i> {{opcao.text}}</span>'
ng-class="{disabled: opcao.locked}" value="{{opcao}}">
{{opcao.text}}
</option>
</select>
A sua diretiva dá um melhor suporte para o "data-content"?
I am using this in an application and I am getting the following error on line 27 of
angular-bootstrap-select.js:
Cannot set property '$render' of undefined
It appears ngModel is undefined at the time this is ran. If I check for this and return upon undefined, everything works fine.
I found some inconsistency between the source file and the build file.
in bower.json, the main file is pointed to the dist file, so when building my project with grunt, it uses the file under build/
When using ng-options with selectpicker in angular 1.4 - changing the model value does not correctly update the selectpicker. I think this may be related to this update of ng-options: https://docs.angularjs.org/guide/migration#ngoptions
Specifically it could be caused by the fact ng-options option values are now prefixed with type like number:1
string:foobar
.
<select selectpicker
ng-model="dobMonth"
name="dobMonth"
ng-options="month.id as month.name for month in months">
<option value>Month</option>
</select>
Using track by
seems to work around the issue:
ng-options="month.id as month.name for month in months track by month.id"
I have the following situation:
When access #/test Direct testing for the navigation bar, the select is loaded correctly. However if I access the #/home for the navigation bar and a link through to access the #/test (without reload - SPA) angular-select is not loaded, appearing only in the select list and not in the format of select.
Can someone give me a hand !?
Bootstrap-select's current version 1.4.3
and Angular's latest version 1.2.14
— both seem to cry foul with this bootstrap-select-plugin. Any plans to update?
It seems that one cannot use the Up/Down keys with the options list when also using data-live-search="true"
Is this a known issue?
I've noticed the directive slows down the loading of the whole page if there are a lot of options (I have ~200, combined with data-live-search).
Hi there.
I am using this and I am very happy with it.
However I am not sure how to go about selecting the default choice for the picker...
Currently i do this:
<select class="m-l-20 pull-right selectpicker" selectpicker ng-model="currentLanguage">
<option ng-repeat="language in defaultLanguage" data-content="<span class=''><img src='/assets/img/flags/{{language.Value}}.png'/> {{language.Name}}</span>" value="{{language}}"> </option>
<option ng-repeat="language in campaign.Languages" data-content="<span class=''><img src='/assets/img/flags/{{language.Value}}.png'/> {{language.Name}}</span>" value="{{language}}"> </option>
</select>
But it seems a very nasty way of doing it.. Basically I have my Languages as objects in an array (campaign.Languages) but in order to have the first language selected by default I have to add the first and do ng-repeat on an array with 1 single item which i initialize it to be the first language of the main language array.
There must be a better way of doing this..
Hi,
It seems you haven't published your latest version in bower? The bower version is not supporting ng-repeat but your git version does.
Cheers.
I'm not sure that is related to bootstrap-select, it's maybe because of the directive so i post the issue here
snapappointments/bootstrap-select#1133
I have installed the module using bower, and i could not get it to work. I double checked everything a couple of times, and then i looked at the source. in both the toggle
and selectpicker
directive the restrict parameter should include 'C'
as the examples indicate a classname should be used to invoke the directive. That means that:
restrict: 'A'
should become
restrict: 'AC'
Or is this something specific to my use case and should it work out of the box?
This just mean do restrict: "ACE"
instead of restrict: "A"
! ;-)
When I use the plugin inside a page included via ng-include, the directive does not work.
It not working well with the latest version of the bootstrap select.
if you using ng-option like this:
ng-options="c.text for c in timeUnit track by c.value"
This piece of code causing problem.
function refresh(newVal) {
scope.$applyAsync(function () {
if (attrs.ngOptions && /track by/.test(attrs.ngOptions)) element.val(newVal);
element.selectpicker('refresh');
});
}
If the variable used in ng-options
changes after the view is rendered the select box does not rerender.
This makes this plugin unusable when getting select options from an AJAX call.
Is there a way to get around this? Is the a bug that needs to be looked into?
When using multiple with angular and the data only has one item selected in the multiple dropdown, it's not showing the one selected item.
[ < td ng-repeat="(key, value) in attributes">
< div ng-if="value.property =='MultiSelect' ">
< select selectpicker="" class="form-control" name="uAttr_{{key}}[]" ng-model="selectedDevice.attributes[key.toLocaleLowerCase()]" multiple="multiple" ng-options="attrType for attrType in value">
< /td>]
the value of selectedDevice.attribues[key.toLocaleLowerCase() = ["700 Mhz"]
I can only get ngChange to fire on the first selection. Is there any reason it doesn't work on subsequent selections?
I found that directive selectpicker is restricted to be attribute instead of class. Based on README.md, we only need to specify class "selectpicker". Is that mean the directive will not be triggered? Thanks for any advice.
I am using this plugin in a project:
<select
selectpicker="selectpicker"
data-none-selected-text="Select"
ng-model="..."
ng-options="..."
name="..."
required="required"
class="form-control"
></select>
I have listeners in the directive listening for click
events:
angular.element($document[ 0 ].body).bind('click', function(event) {
console.log('CLICK');
});
$document.on('click', function (e) {
console.log('CLICK');
});
When the selectpicker control is clicked, the first click handler gets triggered, but the second does not. It seems that the click event never propagates to the document
.
just upgraded to Angular 1.3 and all of my instances of this directive have broken. They are no longer displaying the data from their respective models. Just a bunch of empty dropdowns.
Any thoughts as to what may be causing this?
I would like to have a feature for searching the options list and selecting one, as there is one in bootstrap select with a live-search="true" attribute.
Looks like your select element in your readme isn't corrent: Since this is the angular version, it should also include the directive
ngOptions is limited. Depending on ngOptions means you can't use ng-repeat to create your options that have optgroup
tags.
Can I confirm latest version is 0.1.0-rc2?
Ng-options is not working correctly even when trying to recreate the demo 'colors' example.
Thanks for angular-bootstrap-select. i appreciate it. I am just curious to know why does not the default selectpicker work with angular? does angular dependency injection feature cause some issue ?
Is it possible to add an icon to dynamic options?
It's certainly possible to add to static options:
data-icon="icon-heart"
The icon is picked up by the jquery plugin.
But what if these options are being generated by ng-options? (At this point I don't care if it's the same icon repeated for each - I just want to know if placing an icon using ng-options is even possible with angular-bootstrap-select.)
Hi!
I just "fixed" library to support following structure:
<select class="form-control"
data-style="btn-primary"
data-live-search="true"
data-selectpicker
ng-model="selectedPeople"
ng-collection="people"
ng-options="p.id as p.name for p in people"
></select>
And actual directive:
angular.module("angular-bootstrap-select", [])
.directive("selectpicker",
[
"$timeout",
function($timeout) {
return {
restrict: "A",
require: ["?ngModel", "?ngCollection"],
compile: function(tElement, tAttrs, transclude) {
console.log("init bootstrap-select");
tElement.selectpicker();
if (angular.isUndefined(tAttrs.ngModel)) {
throw new Error("Please add ng-model attribute!");
} else if (angular.isUndefined(tAttrs.ngCollection)) {
throw new Error("Please add ng-collection attribute!");
}
return function(scope, element, attrs, ngModel) {
if (angular.isUndefined(ngModel)){
return;
}
scope.$watch(attrs.ngModel, function(newVal, oldVal) {
if (newVal !== oldVal) {
$timeout(function() {
console.log("value selected");
element.selectpicker("val", element.val());
});
}
});
scope.$watch(attrs.ngCollection, function(newVal, oldVal) {
if (newVal && newVal !== oldVal) {
$timeout(function() {
console.log("select collection updated");
element.selectpicker("refresh");
});
}
});
ngModel.$render = function() {
element.selectpicker("val", ngModel.$viewValue || "");
};
ngModel.$viewValue = element.val();
};
}
}
}
]
);
I know that this not yet "ready" but I hope it will help someone. If you wanna i could make pull request of this.
Thanks a lot for your directive, it works great except when I populate a <select>
by an $htttp
, in this case it seems to give some timing issue and I end up with an empty list. The selecpicker
seem to be displayed with an empty list but is not refreshed properly when the data finally arrives from the server. Perhaps it's missing a watcher of some kind?
I also submitted a question on Stack Overflow, so we might also get some valid answers and help there on resolving this issue.
http://stackoverflow.com/questions/28336106/angular-bootstrap-select-timing-issue-to-refresh
I have tried to make this work in my angular app but it doesn't. the instruction don't seem clear either.
I have imported the following:
`<script type="text/javascript" charset="utf-8" src="js/vendor/angular-bootstrap-select.js"></script>
as well as the css: <link href="css/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
however it still looks like a normal select:
my html:
`
`Could someone tell me what I am doing wrong / why the select button style isn't applied?
With this example I get empty list:
<select selectpicker ng-model="selectedOption" ng-options="term.tid as term.name for term in myOptions>
<option value="">- select -</option>
</select>
Hello,
I have some select element that used ng-disabled to dynamically enable/disable this element base on conditions, but when the ng-disabled value is changed, the enablility of the element didn't changed as expect, any workaround on this ?
I'm using 1.5.2 bootstrap select and I had a bunch of problems with trying to use angular-bootstrap-select. I did some troubleshooting and I think I've found the issue. This doesn't work with 1.5.2. Here's a fiddle to show it http://jsfiddle.net/8jgy1yjs/
Any ideas what might be causing this issue
If I put ng-required="true" on a selectpicker select it is $invalid: true, $pristine: false, and $modelValue: undefined
Without the ng-required, the $modelValue: null (and, of course, no error on load)
I am working around this with custom validation, but was wondering if this is a known issue or fact of life.
Hello, I am having a problem loading data via ajax with this directive. Would you be having an example for that. I am kind of a beginner with Amgular and might not be seeing things like you are. I added a watch on the scope property that is getting populated with the ajax data, then tried to call the refresh method on the select pciker, but dont see the data being binded. Any ideas?. Thank You
Hi,
I'm having an issue when trying to use a selectpicker inside a column of a ng-table, the dropdown is being duplicated and I can't find the reason.
Just as an example, I created the following table:
<div class="table-responsive" style="width: 1300px;">
<table ng-table="batchUserCtrl.tableParams" class="table table-bordered table-hover">
<tr ng-repeat="classification in $data" class="vert-align">
<td data-title="'ID'" sortable="'object.object_id'" class="vert-align col-sm-1">
<a href="">{{classification.object.object_id}}</a>
</td>
<td data-title="'Texto'" sortable="'object.text'" class="vert-align col-sm-2">
{{ classification.object.text }}
</td>
<td data-title="'Sentimento'" class="vert-align col-sm-1" ng-if="batchUserCtrl.controlColumnsVisibility(1)">
<select title="Selecionar" ng-model="batchUserCtrl.bla" selectpicker data-live-search="true" id="teste">
<option>1</option>
<option>2</option>
</select>
</td>
<td data-title="'Tema'" class="vert-align col-sm-1" ng-if="batchUserCtrl.controlColumnsVisibility(2)">
{{ batchUserCtrl.getValue(classification.category_values, 2).val }}
</td>
<td data-title="'Manifestação'" class="vert-align col-sm-1" ng-if="batchUserCtrl.controlColumnsVisibility(4)">
manif
</td>
<td data-title="'Complemento 1'" class="vert-align col-sm-1" ng-if="batchUserCtrl.controlColumnsVisibility(5)">
{{ batchUserCtrl.getValue(classification.category_values, 5).val }}
</td>
<td data-title="'Outros'" class="vert-align col-sm-1">
{{classification.others}}
</td>
<td data-title="'Lixo'" class="vert-align col-sm-1">
{{classification.garbagePretty}}
</td>
</tr>
</table>
</div>
In the third column I created only one selectpicker with fixed options, but when the page is rendered there are 2 dropdowns, instead of one:
And only the upper one works, which means that the user can select an option, the other one shows the options and even let the user choose one of them, but doesn't change the selected option text. If I put the same <select>
tag outside the table it works ok.
Here's the HTML code of the selectpickers after the page is fully rendered:
<td data-title="'Sentimento'" class="vert-align col-sm-1 ng-scope" ng-if="batchUserCtrl.controlColumnsVisibility(1)" data-title-text="Sentimento">
<!--{{ batchUserCtrl.getValue(classification.category_values, 1).val }}-->
<select title="Selecionar" ng-model="batchUserCtrl.bla" selectpicker="" data-live-search="true" id="teste" class="bs-select-hidden ng-untouched ng-valid ng-dirty ng-valid-parse"><option class="bs-title-option" value="">Selecionar</option>
<!--2-->
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="btn-group bootstrap-select ng-pristine ng-untouched ng-valid ng-dirty ng-valid-parse">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="teste" title="2" aria-expanded="false">
<span class="filter-option pull-left">2</span> <span class="caret">
</span>
</button>
<div class="dropdown-menu open" style="max-height: 141px; overflow: hidden; min-height: 42px;">
<div class="bs-searchbox"><input type="text" class="form-control" autocomplete="off">
</div>
<ul class="dropdown-menu inner" role="menu" style="max-height: 87px; overflow-y: auto; min-height: 0px;">
<li data-original-index="1" class="">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text">1</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
<li data-original-index="2" class="selected active">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text">2</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="btn-group bootstrap-select">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="teste" title="Selecionar" aria-expanded="false">
<span class="filter-option pull-left">Selecionar</span> <span class="caret"></span>
</button>
<div class="dropdown-menu open">
<div class="bs-searchbox">
<input type="text" class="form-control" autocomplete="off">
</div>
<ul class="dropdown-menu inner" role="menu">
<li data-original-index="1" class="active">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text">1</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
<li data-original-index="2">
<a tabindex="0" class="" style="" data-tokens="null">
<span class="text">2</span>
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ul>
</div>
</div>
</td>
Can someone please help?
Thanks!
The issues is that path '.bootstrap-select.open' is being fouled by various ng-xxxx form class, ie.
See http://codepen.io/caseyjhol/pen/dPRXBN
Example:
scope.colors = [{ id: 10, name: 'Red' }, { id: 20, name: 'Green' }, { id: 30, name: 'Blue' }];
<select selectpicker ng-model="selected" ng-options="c.name for c in colors track by c.id"></select>
When an option is selected, the value of the select is set to the object, rather than the track by property. So, selecting "Green" from the list sets the value to {id: 20, name: 'Green' }
, instead of 20
.
I created a workaround by implementing a trackBy attribute and altering the refresh
function.
function refresh(newVal) {
$timeout(function () {
if (attrs.ngOptions && /track by/.test(attrs.ngOptions)) {
if (attrs.trackBy && newVal) {
element.val(newVal[attrs.trackBy]);
} else {
element.val(newVal);
}
}
element.selectpicker('refresh');
});
}
<select selectpicker ng-model="selected" ng-options="c.name for c in colors track by c.id" track-by="id"></select>
This isn't ideal and doesn't work when tracking by $index
, but it works for me for now.
Can you help me to filter the live search data which maps the string that starts from the user entered string.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.