CODEWITHSUNDEEP
javascriptjquerycssangularjs
Kurkula
Kurkula

Reputation: 6762

Angularjs show hide css issue

I had a hard issue figuring out on how to hide and show icon/text with angular code. I am completely new to angular and tried hard on the below fiddle code. How do I hide + or minus icon with .closest in such dom scenarios.

<div ng-controller="MyCtrl">
  {{name}}
  <div data-toggle="collapse" aria-expanded="true" data-target="#list-item-line-0" id="expandCollapseChild" ng-click="addExpandCollapseChildIcon()">
    <div>
      <div>
        <label>
          <div>
            <span class="icon-expand">-</span>
            <span class="icon-collapse">+</span>
          </div>
          <div>
            Click me to hide minus icon
          </div>
        </label>
      </div>
    </div>
  </div>
</div>


 var myApp = angular.module('myApp', []);

 function MyCtrl($scope) {
   $scope.name = 'Superhero';

   $scope.addExpandCollapseChildIcon = function() {
   alert('');
     if (angular.element('#expandCollapseChild').hasClass('collapsed')) {
       angular.element(this).closest('.icon-collapse').css('display', 'none');
     } else {
       if (angular.element('#expandCollapseChild').hasClass('collapsed')) {
         angular.element(this).closest('.icon-collapse').css('display', 'block');
       }
     }
   }

Upvotes: 0

Views: 566

Answers (3)

Sarhanis
Sarhanis

Reputation: 1587

In Angular, this is the wrong approach. You shouldn't actually show or hide elements inside the controller. That's applying a jQuery style (working directly on the DOM) to Angular.

In Angular, you'd use something like ng-if, ng-show or ng-class, all of which can link back to a property on the scope object that is accessible via the controller.

Here are some examples:

<div ng-if="myProp === 'ShowMe'">
<div ng-show="myProp === 'ShowMe'">
<div ng-class="{myCssClass: myProp === 'ShowMe'">

Inside your controller, you'd have something like this:

function MyCtrl($scope) {
    $scope.myProp = 'ShowMe';
    $scope.addExpandCollapseChildIcon = function(newPropValue) {
        $scope.myProp = newPropValue;
    }
}

Here's some links to documentation on ng-if, ng-show and ng-class:

Upvotes: 3

Michael Cornetto
Michael Cornetto

Reputation: 64

The way you defined your app and controller was incorrect. There's a bunch of different ways to do this as you can see from the answers.

I took this approach:

<div ng-app='myApp' ng-controller="MyCtrl">
  {{name}}
  <div>
    <div>
      <div>
        <label>
          <div>
            <span ng-show='(collapsed != false)' class="icon-expand">-</span>
            <span ng-show='(collapsed == false)' class="icon-collapse">+</span>
          </div>
          <div ng-click='collapsed = !collapsed'>
            Click me to hide minus icon
          </div>
        </label>
      </div>
    </div>
  </div>
</div>
<script>
 var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function ($scope) {
   $scope.name = 'Superhero';
   $scope.collapsed = false;

  }); 
</script>

Create a scoped variable that indicated whether or not it is collapsed . Then change that variable and the ng-shows will react.

Upvotes: 1

8eecf0d2
8eecf0d2

Reputation: 1579

AngularJS has a bunch of angulary ways of doing things, your question for example might look like this:

var app = angular.module("app", []);

app.controller("ctrl", function($scope) {
  $scope.collapsed = true;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app">
  <div ng-controller="ctrl">
    <span ng-bind="collapsed ? '+' : '-'"></span>
  </div>
</div>

It watches a model and changes it's appearance based on that model using the ternary operator within ng-bind.

Upvotes: 1

Related Questions