An AngularJS model to add selector behaviour to select one object between many by reference or id.
Use the model to generate a list of options:
angular.module('selector.demo', [
'drpx.selector'
]).controller('DemoController', function(DrpxSelector) {
this.selector = new DrpxSelector();
this.selector.add({
id: 'colonial-one',
label: 'Colonial One',
value: 'Colonial One is a civilian starship that serves as the headquarters for the President of the Twelve Colonies.'
}, {
id: 'galactica',
label: 'Battlestar Galactica',
value: 'The Galactica is the last of the 12 original Battlestars from the first Cylon war.'
}, {
id: 'hitei-kan',
label: 'Hitei Kan',
value: 'Hitei Kan is the fleet\'s tylium processing ship and is one of the most important ships in the fleet.'
});
this.selector.show('colonial-one');
});
Use it in a view:
<div ng-controller="DemoController as demo">
<h3>Pick one</h3>
<div ng-repeat="value in demo.selector.values">
<button ng-click="demo.selector.show(value)">
<span ng-show="demo.selector.is(value)">*</span>
</button>
</div>
<h3></h3>
<div>
</div>
</div>
Add the bower component drpx-components
:
$ bower install --save drpx-components
Add the dependency to your index.html
:
<script src="bower_components/drpx-components/DrpxSelector.js"></script>
Add the dependency to you YourApp.js
:
angular.module('YourApp', [
// ...your other dependencies...
'drpx.selector',
]);
Inject the DrpxSelector model into your stuff:
MyStuff.$inject = ['DrpxSelector'];
function MyStuff ( DrpxSelector ) {
this.selector = new DrpxSelector();
// ...
}
See examples for more detail.