Angularjs show hide css issue

Question

У меня была сложная проблема, когда я выяснял, как скрыть и показать значок/текст с угловым кодом. Я совершенно не знаком с угловым и старался сделать код ниже fiddle. Как скрыть значок + или минус с .closest в таких сценариях dom.

<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

В Угловом, это неправильный подход. Вы не должны показывать или скрывать элементы внутри контроллера. Это применяет стиль jQuery (работающий непосредственно с DOM) в Angular.

В Угловом, вы должны использовать что-то вроде ng-if, ng-show или ng-class, все из которых могут ссылаться на свойство объекта области, доступного через контроллер.

Вот некоторые примеры:

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

Внутри контроллера, вы бы что-то вроде этого:

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

Вот некоторые ссылки на документацию на нг-если, нг-шоу и нг -класс:

• 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 имеет кучу angulary способы ведения дел, ваш вопрос, например, может выглядеть следующим образом:

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>

Он наблюдает модель и изменяет его внешний вид на основе этой модели, используя тернарный оператор в пределах ng-bind.

Answer 3

То, как вы определили свое приложение и контроллер, неверно. Есть несколько способов сделать это, как вы можете видеть из ответов.

Я принял этот подход:

<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> 

Создать контекстный переменный, указанные ли она или нет разрушилась. Затем измените эту переменную, и ng-show будет реагировать.