Name: nya-bootstrap-select
Owner: SpatialDev
Description: An AngularJS select replacement which build select like dropdown component with collection and ng-model support
Created: 2015-02-22 22:41:09.0
Updated: 2015-02-22 22:41:09.0
Pushed: 2015-01-31 08:39:11.0
Homepage: http://nya.io/nya-bootstrap-select/
Size: 1322
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
nya-bootstrap-select v2 is an AngularJS directive set inspired by @silviomoreto 's bootstrap-select . With this directive you can built an bootstrap-select with data-binding feature of angularjs. The 2.x version is totally rewritten. while keep the most feature of bootstrap-select but no longer depends jquery and bootstrap-select plugin.
Require: angular 1.2+
Install
Install via bower:
bower install nya-bootstrap-select --save
or download the latest release.
include the nya-bootstrap-select.js and nya-bootstrap-select.css file to your html.
add to application dependecies.
angular.module('yourApp', ['nya.bootstrap.select'])
add code to your view template. you need two directive: nya-bs-select and nya-bs-option to build your select picker. nya-bs-select is a class, attribute, tag stricted directive. while nya-bs-option is an attribute stricted directive. Also, you need ng-model add to the nya-bs-select element to bind your model.
class="nya-bs-select" ng-model="myModel">
<li nya-bs-option="option in options">
<a>
{{option.name}}
</a>
</li>
>
Migrate from 1.x If you have used the previous version of this directive. you need to replace the old code in the template. See the examples below
You can use static options which means you can't change the option when the HTML code is ready. Under this usage, you don't use the nya-bs-option directive, but you should add nya-bs-option class to all the <li> element and value attribute to let the directive know you option's value.
class="nya-bs-select" ng-model="myModel">
<li value="alpha" class="nya-bs-option">
<a>
Alpha
</a>
</li>
<li value="beta" class="nya-bs-option">
<a>
Beta
</a>
</li>
<li value="charlie" class="nya-bs-option">
<a>
Charlie
</a>
</li>
>
If you decide to use static option, you shouldn't change the option any more, otherwise you may need the nya-bs-option directive to generate options dynamically.
In this section you'll see several usage of the nya-bs-option directive.
This is the very basic usage, we have an array of object used to generate options. the myModel will be one of the objects in the options array. if you add an mulitple attribute to the nya-bs-select element. myModel will be array of objects.
class="nya-bs-select" ng-model="myModel">
<li nya-bs-option="option in options">
<a>{{option.name}}</a>
</li>
>
Like vanilla <select> we can also generate option group with any property in an object. if you options is an array of object. like [{name: “alpha”, group: “Group 1”}, {name: “beta”, group: “Group 2}, {name: “charlie”, group: “Group 2”}]. then we can use group by in nya-bs-option expression to generate group.
class="nya-bs-select" ng-model="myModel">
<li nya-bs-option="option in options group by option.group">
<span class="dropdown-header">{{$group}}</span>
<a>
{{option.name}}
</a>
</li>
>
This project is built by Grunt, fork this project. and clone to your local repository. run npm install, bower install to install all development dependencies.
Source files are separated to several files. run grunt build will do some karma unit test and combine these files to one single file and compress the js and css files.
e2e test is not available temporarily, I will add those test in the future.
Licensed under the MIT license