Search code examples
javascriptangularjsangular-ui-routerng-class

Ng-class removing class when click event

I have a button on main page that link to some another page. When that button clicked I want to remove class from one div.

Controller:

$scope.myClass = ["container","gnc1"];
     $scope.removeClass = function() {
     $scope.myClass.splice(1, 2);
}

I am using ui-router for this:

<body ui-view="viewA">
    <div ng-class="myClass">
    <div ui-view="viewC">
    <div ui-view="viewB">

        <a ui-sref="B"> </a> //Loads the B.html to where viewB is. ControllerB


        <a ui-sref="C" ng-click="removeClass()"> </a> //Loads the C.html where viewC is. controllerC


  </div>

  </div>

  </div>

</body>

Button:

<a ng-click="removeClass()"></a>

What am I missing here? How can I remove that "gnc1" class?

Edit-1:

<div ng-class="{container:dogru, gnc1:yanlis}">

indexCtrl:

$scope.dogru = true;
$scope.yanlis = true;

Button belongs to controllerC so in controllerC:

$scope.removeClass = function($scope) {
        $scope.dogru = true;
        $scope.yanlis = false;
    }

But this didnt work either. What am i missing?

Solution

  • I suggest you use ng-class like this instead

    <div ng-class="{container:isConditionTruthy, gnc1:!isConditionTruthy}">

...ng-click="isConditionTruthy = !isConditionTruthy"...

    If you post a fiddle with your code I can show you.