AngularJS顯示隱藏的CSS問題

Question

我在弄清楚如何使用角度代碼隱藏和顯示圖標/文本時遇到了一個難題。 我是新手，對下面的小提琴代碼很努力。 在這種dom場景中，如何隱藏帶有.closest的+或減號圖標。

<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

在Angular中，這是錯誤的方法。 您實際上不應在控制器內部顯示或隱藏元素。 這是將jQuery樣式（直接在DOM上工作）應用於Angular。

在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;
    }
}

以下是一些有關ng-if，ng-show和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有很多棱角分明的處理方式，例如，您的問題可能如下所示：

 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的三元運算符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-shows會做出反應。