ng-class and ng-click not working

Question

I'm trying to use AngularJS to create a simple click to bold effect. I hope not to involve any controller scripts, but included or not, my code just don't work.

My HTML code with angular markup

<div ng-app="organHome">
    <dl class="sub-nav" ng-controller="inModalSwitchCtrl">
        <dd ng-class="content:bold"><a ng-click="switchContent()" ng-model="content">Contents</a>
        </dd>
        <dd ng-class="comment:bold"><a ng-model="comment" ng-click="switchComment()">Comments</a>
        </dd>
    </dl>
</div>

My js code:

angular.module('organHome', [])

    .controller('inModalSwitchCtrl', function ($scope) {
    $scope.content = true;
    $scope.comment = false;

    $scope.switchContent = function ($scope) {
        $scope.content = true;
        $scope.comment = false;
    };

    $scope.switchComment = function ($scope) {
        $scope.comment = true;
        $scope.content = false;
    };
});

Here is the example on fiddle

http://jsfiddle.net/qHkWA/

I know it must be very rookie-ish, but I'm stuck. Any help?

My original goal was to minimize my code, and hopefully no controller.js at all.

If there is anyway to just do it with existing directives, I would love to follow!

My horrible and not working approach looks like this:

<dl class="sub-nav">
    <dd ng-class="'active':content"><a ng-click="content = true" ng-model="content">Contents</a></dd>
    <dd ng-class="'active':comment"><a ng-model="comment">Comments</a></dd>
</dl>

Your jsfiddle example is throwing an error in the Chrome Console: `Uncaught Error: No module: organHome` I'm not sure if that is the root cause. — JeffryHouser, Oct 14 '13 at 02:58

Nitish Kumar · Accepted Answer · 2013-10-14T03:24:17.507

in html:

    <dd ng-class="{'bold':content}"><a ng-click="switchContent()" ng-model="content">Contents</a></dd>

    <dd ng-class="{'bold':comment}"><a ng-model="comment" ng-click="switchComment()">Comments</a></dd>

Also Add css :

  .bold {font-weight: bold}

DEMO

EDIT

For less code, you can use this :

      <div ng-app="organHome">
         <dl class="sub-nav" ng-controller="inModalSwitchCtrl" ng-init="content=true">
            <dd ng-class="{'bold':content}"><a ng-click="content=true">Contents</a></dd>
            <dd ng-class="{'bold': !comment}"><a ng-click="content=false">Comments</a></dd>
         </dl>
     </div>

DEMO

may I ask does a writing like ng-init="content=true" normally work or not? — windweller, Oct 14 '13 at 03:14

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

Simplified syntax for ng-class is {value:expression} So your code would look like this:

<dd ng-class="{bold:content}"><a ng-click="switchContent()" ng-model="content">Contents</a></dd>
<dd ng-class="{bold:comment}"><a ng-model="comment" ng-click="switchComment()">Comments</a></dd>

Also you should select "No wrap in head". In your case angular did not even started.

Here is the working fiddle - http://jsfiddle.net/qHkWA/3/

Also for better understanding of how this work you may take a look at this thread - What is the best way to conditionally apply a class?

And I don't know is it suits your purposes but you may simplify whole your code using jquery's toggleClass - http://jsfiddle.net/8kgMZ/3/ :

 <dd class="bold"><a ng-click="toggleBold()">Contents</a></dd>
 <dd><a ng-click="toggleBold()">Comments</a></dd>

and the controller:

  .controller('inModalSwitchCtrl', function ($scope) {
      $scope.toggleBold = function() {
          angular.element(document).find('dd').toggleClass('bold');
      };

edited May 23 '17 at 12:05

Community

1
1

answered Oct 14 '13 at 02:54

SET001

11,480
6
52
76

When you said "No Wrap in Head" you were referring to the jsfiddle settings, correct? When I try your sample I do not see it working. – JeffryHouser Oct 14 '13 at 03:02
it changing class when you click on that text, doesn't it? – SET001 Oct 14 '13 at 03:05
I agree that toggle class might be a great solution at the time, but Angular's philosophy demands avoiding directly manipulation over DOM elements...that's the reason I try to use model value to control class behavior. Thank you for the jQuery code though! – windweller Oct 14 '13 at 03:21
You just see how my last fiddle is simplified compared to what you call is following angular's philosophy. – SET001 Oct 14 '13 at 03:24

ng-class and ng-click not working

2 Answers2