Need help please with working with forms and angular js

Question

I have found a tutorial on how to work with the angular js, but when I try to implement it into my work, I do not get the same results. Here is the original:

jsfiddle

And here is my work:

jsfiddle

Also, how can I get the values from the selected button with javascript (question, suggestion...)?

<div class="btn-toolbar">
                <div name="cate" class="btn-group" required="required">
                    <button class="btn" href="#"><i class="icon-coffee"></i> Question</button>
                    <button class="btn" href="#"><i class="icon-plus-sign-alt"></i> Suggestions</button>
                    <button class="btn" href="#"><i class="icon-stethoscope"></i> Product Support</button>
                </div>
                    <span class="label label-danger" data-ng-show="submitted && helpForm.cate.btn.$error.required">Required!</span>

Thank you!

make then type=button" so they don't submit and add an ng-click that changes a scope variable — charlietfl
– charlietfl, Commented Jul 30, 2014 at 23:30

Simeon Cheeseman · Accepted Answer · 2014-08-06 01:49:01Z

1

As @charlietfl said in the comments one way is to roll your own, the other is to use one of the libraries floating around like: http://mgcrea.github.io/angular-strap/#/tooltips#buttons, which is by far the best option as they normally have fixed a lot of the possible bugs you may come across.

If you want to roll your own I have build a simplistic example here: http://codepen.io/SimeonC/pen/Lzjis

<div class="btn-group">
  <button type="button" ng-click="toggle = 'question'" ng-class="{active: toggle == 'question'}" class="btn btn-default"><i class="icon-coffee"></i> Question</button>
  <button type="button" ng-click="toggle = 'suggestions'" ng-class="{active: toggle == 'suggestions'}" class="btn btn-default"><i class="icon-plus-sign-alt"></i> Suggestions</button>
  <button type="button" ng-click="toggle = 'support'" ng-class="{active: toggle == 'support'}" class="btn btn-default"><i class="icon-stethoscope"></i> Product Support</button>
</div>

EDIT In response to the comment, making this button 'required' is a matter of manual validation. Something like the following:

HTML:

<span class="label label-danger" ng-show="!toggle || toggle.length <= 0">Required!</span>

In the submit function of the form use:

if(!$scope.toggle || $scope.toggle.length <= 0) // prevent submission!

edited Aug 6, 2014 at 1:49

answered Jul 31, 2014 at 0:26

Simeon Cheeseman

1,7681 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

keren7 Over a year ago

Thank you for that! So, to address the value of the chosen button do I write $scope.toggle?

Simeon Cheeseman Over a year ago

Yes, the basic rule for anything in angular.js is that a html reference to a variable has the $scope. taken off the front. (A very simplistic way of thinking about it).

keren7 Over a year ago

Do I need to write $scope.button.toggle or just $scope.toggle?

Simeon Cheeseman Over a year ago

Just $scope.toggle. If it helps you can think of ng-click="toggle = 'question'" (which also be a function) as the button telling the controller, "when I am clicked, run this on the current scope".

Simeon Cheeseman Over a year ago

Yup that one looks better. You were nearly there, I've updated it for you here: plnkr.co/edit/EwMo2RBVevCO0krcLWqE?p=preview

|

Collectives™ on Stack Overflow

Need help please with working with forms and angular js

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related