我在弄清楚如何使用 Angular 代码隐藏和显示图标/文本时遇到了一个难题。我对 Angular 完全陌生，并在下面努力尝试 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');
}
}
}
最佳答案
在 Angular 中，这是错误的做法。您实际上不应该显示或隐藏 Controller 内的元素。这是将 jQuery 样式(直接在 DOM 上工作)应用于 Angular。
在 Angular 中，您会使用 ng-if、ng-show 或 ng-class 之类的东西，所有这些都可以链接回可通过 Controller 访问的作用域对象上的属性。
这里有一些例子:
<div ng-if="myProp === 'ShowMe'">
<div ng-show="myProp === 'ShowMe'">
<div ng-class="{myCssClass: myProp === 'ShowMe'">
在你的 Controller 中，你会有这样的东西:
function MyCtrl($scope) {
$scope.myProp = 'ShowMe';
$scope.addExpandCollapseChildIcon = function(newPropValue) {
$scope.myProp = newPropValue;
}
}
这里有一些关于 ng-if、ng-show 和 ng-class 的文档链接:
关于javascript - Angularjs 显示隐藏 css 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35422808/