Question

我有一个很难解决如何用角度代码隐藏和显示图标/文字的问题。我是角色的新手，并努力尝试下面的fiddle代码。如何在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文档的一些链接：

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内的三元运算符观察模型并根据该模型更改其外观。

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将作出反应。

Angularjs显示隐藏css问题

3 个答案: