angularjs split button
npm install angularjs-splitbuttonsh
$ npm install --save angularjs-splitbutton
`
Demo
- http://next.plnkr.co/plunk/okwSlKqP5RpyIM4b
Use
- include dependencies
`html
`
`js
angular.module('app', ['ngMaterial'])
`
- include angularjs-splitbutton
`html
`
`js
angular.module('app', ['ngMaterial', 'splitButton'])
`
- create a list
`js
const optionList = [
{
name: 'jump',
action: function() {
v.output = 'how high?';
}
}, {
name: 'open dialog',
action: function() {
v.output = 'opening a dialog';
}
}, {
name: 'find answer to everything',
action: function() {
v.output = '42';
}
}
];
`
- Add the button and functionality
Angularjs-splitbutton only needs an array of strings as options and a default string.
It uses the onChoice callback to execute actions when the user chooses an option.
The button will take the full width of its containing element to easily size it with other elements
Note: The argument for onChoice needs to be called 'option' in the markup
`html
`
`js
v.defaultOption = optionList[0].name;
v.options = optionList.reduce((acc, o) => {
if(o.name !== v.defaultOption) {
acc.push(o.name);
}
return acc;
}, []);
v.onChoice = function onChoice(option) {
optionList
.find(o => o.name === option)
.action();
};
``