[英]Angularjs show hide css issue
我在弄清楚如何使用角度代码隐藏和显示图标/文本时遇到了一个难题。 我是新手,对下面的小提琴代码很努力。 在这种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中,这是错误的方法。 您实际上不应在控制器内部显示或隐藏元素。 这是将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的文档的链接:
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
模型并根据该模型更改外观。
您定义应用和控制器的方式不正确。 从答案中可以看到,有很多不同的方法可以做到这一点。
我采用了这种方法:
<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会做出反应。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.