Re: [AngularJS] ngModel for <input tyepe="button">

[Peter Bacon Darwin]

How would this work?

Pete
...from my mobile.

On Nov 22, 2012 11:00 AM, "Marcin Warpechowski" <war...@gmail.com> wrote:

I was asked if ngModel can be used with <input type="button">. Reading through API Reference I started wondering why it is not implemented in Angular? Any risks if I try to implement it on my own?

Please see the below syntax proposal:

<input type="button" ng-model="lunch" value="Steak">

<input type="button" ng-model="lunch" value="Salad">

Thanks

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[ganaraj p r]

A good option would be to use radio buttons and style them as buttons for what you are attempting to do!

( I am assuming that is what you are trying to do ... so apologies if I am wrong.. )

--
Regards,
Ganaraj P R

[Michael Bielski]

I'm with Peter... I don't see how it would work. Buttons don't generally hold a value, they initiate an action (such as calling a function.)

<input type="button" ng-click="lunchFunction('steak')" value="steak">

I can't say as I would advocate styling radio buttons to appear differently they they already do, but I do see what functionality is desired.

[Marcin Warpechowski]

Exactly, as you have sensed, the functionality would be to assign value property (or execute value as an expression before assigning it). 

In old PHP times, I was used to do the following:

<input type="submit" name="lunch" value="Steak">

<input type="submit" name="lunch" value="Salad">

Pushing one of the above submits would POST the form with a single property "lunch" and a value corresponding to the pressed submit button.

I would need to achieve the same in the client side and my customer insists on keeping controllers minimum, hence my proposal:

<input type="button" ng-model="lunch" value="Steak">

<input type="button" ng-model="lunch" value="Salad">

 Does it make any more sense now?

[Michael Bielski]

No, it doesn't make any more sense, sorry. Buttons don't hold a value, they initiate an action. The "value" attribute of a button is the text that it displays, nothing more. For something to happen when you click on a button, you have to attach a click event (in Angular: ng-click.) From your original post it sounds like you want the page to change when the user makes a choice with a radio button. That can be done with ng-change (http://docs.angularjs.org/api/ng.directive:ngChange) or ng-click. Actually creating the radio buttons on the fly is done with ng-repeat (http://docs.angularjs.org/api/ng.directive:ngRepeat).

Now, from a usability standpoint I wouldn't advocate moving to another page based upon a radio button change action, but displaying or enabling other options is very common.

[Andrew Barton]

I think it makes perfect sense.

 

No, it doesn't make any more sense, sorry. Buttons don't hold a value, they initiate an action. The "value" attribute of a button is the text that it displays, nothing more. For something to happen when you click on a button, you have to attach a click event

This is simply untrue. Buttons hold data in the form of a name-value pair. This is confirmed by the HTML5 <button> element which also has the name and value attributes.

Your response is very glib and unhelpful and also somewhat arrogant, in addition to being incorrect.

 

[Sander Elias]

Hi Andrew,

You should check the dates before you decide to comment with a opinion.

Oh, that, and:

Your response is very glib and unhelpful and also somewhat arrogant, in addition to being incorrect.

The question is about an ngModel on a button element. That does make no sense. ngModel is there to sync CHANGES between the element's value and the model inside angular.

Explain me, how a button with no click-handler can change a value? 

Regards

Sander