Angularjs show hide css issue

Question

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');
       }
     }
   }

Answer 1

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:

• https://docs.angularjs.org/api/ng/directive/ngIf
• https://docs.angularjs.org/api/ng/directive/ngShow
• https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

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 .

Answer 3

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.