如何在angularJS中的元素之间切换 [英] How to toggle between elements in angularJS
本文介绍了如何在angularJS中的元素之间切换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个元素，一次只能显示其中一个，而另一个元素保持隐藏，直到可见元素消失(单击按钮)为止，这里是我尝试过的最后一个逻辑的示例使用.
I have two elements, only one of them is supposed to show up at a time while the other element stays hidden until the visible element is made to disappear (button click), here an example of the last logic I have tried to use.
.......
<div ng-show='show'>
Visible element
<button ng-click='toggle()'> Toggle </button>
</div>
<div ng-hide='show'>
Hidden Element
</div>
.......
我的控制器中有类似的东西
And I have something like this in my controller
........
$scope.show = true;
$scope.toggle = function(){
$scope.show =!$scope.show;
}
.........
现在，每当我单击按钮时，第一个元素都会消失，但第二个元素将不会显示.请我真的需要帮助.
Now, anytime I click the button, the first element will disappear but the second element will not show. Please I really need help.
推荐答案
这是解决方案
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.show = true;
$scope.toggle = function(){
$scope.show =!$scope.show;
}
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-show='show'>
Visible element
</div>
<div ng-hide='show'>
Hidden Element
</div>
<button ng-click='toggle()'> Toggle </button>
</body>
</html>这篇关于如何在angularJS中的元素之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
