Remove class onclick... angular js

Question

Going a bit insane with this one. I've google for a couple of hours, but can't figure it out...

Basically, I have a form, with a row of radio buttons. (The data is being pulled through, by ng-repeat, but it's basically just a name of a drink, with a price value). EG. Name: Latte. Price: 2.00

<div class="field">
  <label class="radio" ng-repeat="drink in grindsIndex.menuDrinks" >
    <input id='drinkRadio' type="radio" ng-model="value"
         value="{{ drink.price }}" placeholder="{{ drink.name }}"
         name="name" ng-model="grindsIndex.name"
         ng-change="newValue(value)" ng-click="clickMethod()";/>
    {{ drink.name }}
  </label>
</div>

When a check box is clicked, I want another row of radio buttons to appear, by removing the class hide. (This has an ng-repeat, of another list of name values, with price values being pulled through). Eg: Name: Honey, Price: 0.50.

  <div id='extrasOptions' class="field hide">
    <label class="radio" ng-repeat="extra in grindsIndex.menuExtras" >
      <input type="radio" ng-model="value" value="{{ extra.price }}"
             placeholder="{{ extra.name }}" name="name"
             ng-change='newValue(value)'/ 
             ng-click="count = count + extra.price" ng-init="count=0">
      {{ extra.name }}
    </label>
  </div>

In my relevant controller, I'm trying to add an eventlistener, onclick function, (or whatever I can), to simply remove the class 'hide', from the second row of checkboxes, so they appear.

$scope.clickMethod = function () {
  extrasOptions.removeClass('hide');
};

But every time, I get an error..

app.js:33457 Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!"

It's almost as if I can't use 'removeClass, as my app/angular doesn't like it.

All i want to do, is when you click on any of the radio buttons in the first line of code, make the second set of radio buttons appear...

Can anyone help? Google is showing some complex options and I'm a newbie...

Thank you! Reena

fehrmann · Accepted Answer · 2018-03-10 21:01:15Z

1

Why you dont use ng-hide / ng-show

<div id='extrasOptions' ng-show="foo" class="field">
    <label class="radio" ng-repeat="extra in grindsIndex.menuExtras" >
    <input type="radio" ng-model="value" value="{{ extra.price }}" placeholder="{{ extra.name }}" name="name" ng-change='newValue(value)'/ ng-click="count = count + extra.price" ng-init="count=0">{{ extra.name }}
    </label>
  </div>

If foo is true the div is shown and if foo is false not.

$scope.clickMethod = function () {
    foo = true
};

Ofc you can use the Value of the FirstRadioButton too.

edited Mar 10, 2018 at 21:01

answered Mar 10, 2018 at 20:31

fehrmann

793 bronze badges

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

6 Comments

Claies Over a year ago

your answer has a mix of angular and angularjs in it. you can't use [hidden] in angular 1.x, and you can't use $scope in angular 2. This would work perfectly with ng-show, however...

Reena Verma Over a year ago

Thank you for the reply! I tried your solution, but then I get: "foo is not defined"...

fehrmann Over a year ago

Ofcourse you have to define it in your controller. But foo is a bad name for a variable. Its just an example

Reena Verma Over a year ago

sorry for the dumb question, but how should i define it?

Reena Verma Over a year ago

This worked: $scope.clickMethod = function() { $scope.show = true; };

|

Collectives™ on Stack Overflow

Remove class onclick... angular js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related