Add a directive for the button toggle

[pkozlowski-opensource]

Something to ease working with:

http://twitter.github.com/bootstrap/javascript.html#buttons

The proposal for the markup:

<button button-toggle="assignableModelExpression">My button</button>

to mimic the existing dropdownToggle.

The directive should be extremely simple and should:

• add / remove the active class to the button based on model changes
• update model based on the click

WDYT?

[pkozlowski-opensource]

OK, from the discussion on the pull request this doesn't make much sense as a directive, really. The question would ne then - do we want to add demo snippets to the documentation page. So, even if we don't offer any directives we could at least show people how to turn bootstrap's markup into a dynamic, AngulaJS-powered version.

So the question here is the following one: do we want to have those mini-demos on the demo page, mixed with other directives?

[petebacondarwin]

Actually, I really like the idea of

<button toggle ng-model="some.value"></button>

or

<toggle-button ng-model="some.value"></toggle-button>

On 11 January 2013 18:58, Pawel Kozlowski notifications@github.com wrote:

OK, from the discussion on the pull request this doesn't make much sense
as a directive, really. The question would ne then - do we want to add demo
snippets to the documentation page. So, even if we don't offer any
directives we could at least show people how to turn bootstrap's markup
into a dynamic, AngulaJS-powered version.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/53#issuecomment-12158283.

[pkozlowski-opensource]

@petebacondarwin and you are telling it just now??? :-) No, but seriously, what do we do about this thing?

[petebacondarwin]

I honestly think it is worthy. It would have to plug into ng-model though.

[pkozlowski-opensource]

@petebacondarwin ok, it really feels like it is close to a check-box. So maybe it should also support things like true-value and false-value (those should be booleans by default).

[petebacondarwin]

Well you should read this issue then also: angular/angular.js#1199 (comment)

[pkozlowski-opensource]

Yep, had this one on my mind as well :-)

[ajoslin]

Yeah, I guess we could add this since bootstrap has it. It does sound kind of attractive .. it's just kinda funny making a directive for something that is a few words of html attributes in angular.

If we do make it, we should make the apis copy native angular directives: button-group copying <input type="radio"> (ng-model, value) and button-toggle copying <input type="checkbox"> (ng-model, ng-checked)

[pkozlowski-opensource]

OK, another try here: http://plnkr.co/edit/cccFMc3qmNgKCr7inUX3?p=preview

AngularJS is simply awesome! Could anyone could explain to me how come AngularJS version of reusable component has 1/3 size of the original code (https://github.com/twitter/bootstrap/blob/master/js/bootstrap-button.js)??? Not to mention the fact that it doesn't require any wrappers!!!

Will prepare a PR tomorrow but if anyone from @angular-ui/bootstrap could have a quick look it would be awesome!