[英]Angularjs show hide css issue
I had a hard issue figuring out on how to hide and show icon/text with angular code. 我在弄清楚如何使用角度代码隐藏和显示图标/文本时遇到了一个难题。 I am completely new to angular and tried hard on the below fiddle code. 我是新手,对下面的小提琴代码很努力。 How do I hide + or minus icon with .closest in such dom scenarios. 在这种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');
}
}
}
In Angular, this is the wrong approach. 在Angular中,这是错误的方法。 You shouldn't actually show or hide elements inside the controller. 您实际上不应在控制器内部显示或隐藏元素。 That's applying a jQuery style (working directly on the DOM) to Angular. 这是将jQuery样式(直接在DOM上工作)应用于Angular。
In Angular, you'd use something like ng-if, ng-show or ng-class, all of which can link back to a property on the scope object that is accessible via the controller. 在Angular中,您将使用ng-if,ng-show或ng-class之类的东西,所有这些东西都可以链接回可通过控制器访问的范围对象上的属性。
Here are some examples: 这里有些例子:
<div ng-if="myProp === 'ShowMe'">
<div ng-show="myProp === 'ShowMe'">
<div ng-class="{myCssClass: myProp === 'ShowMe'">
Inside your controller, you'd have something like this: 在您的控制器内部,您将具有以下内容:
function MyCtrl($scope) {
$scope.myProp = 'ShowMe';
$scope.addExpandCollapseChildIcon = function(newPropValue) {
$scope.myProp = newPropValue;
}
}
Here's some links to documentation on ng-if, ng-show and ng-class: 以下是一些有关ng-if,ng-show和ng-class的文档的链接:
AngularJS has a bunch of angulary ways of doing things, your question for example might look like this: 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>
It watches a model and changes it's appearance based on that model using the ternary operator within ng-bind
. 它使用ng-bind
的三元运算符ng-bind
模型并根据该模型更改外观。
The way you defined your app and controller was incorrect. 您定义应用和控制器的方式不正确。 There's a bunch of different ways to do this as you can see from the answers. 从答案中可以看到,有很多不同的方法可以做到这一点。
I took this approach: 我采用了这种方法:
<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>
Create a scoped variable that indicated whether or not it is collapsed . 创建一个指示其是否折叠的作用域变量。 Then change that variable and the ng-shows will react. 然后更改该变量,然后ng-shows会做出反应。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.