angular方式:按钮点击后显示或隐藏元素 [英] angular Way of: show or hide element after button click
本文介绍了angular方式:按钮点击后显示或隐藏元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对 angular 还很陌生，但我做对了.
I am pretty new to angular and i cant get it right.
在以下示例中，我试图在用户单击相应按钮后显示问题的答案.在显示答案之前，我想运行一个函数来检查用户是否有权显示答案.在这个例子中，我假设他有权利.
inside the following example i am trying to show the answer to a question after the user clicks on the corresponding button. before the answer is shown i want to run a function that checks if the user has the privilege to reveal the answer. in the example i assume he has the rights.
我必须做什么才能删除单击按钮的行中的ng-hide"类.
what i have to do to to remove the "ng-hide" class in the row where the button was clicked.
我感谢任何形式的帮助.提前致谢
i appreciate any kind of help. thanks in advance
var myApp = angular.module('myApp', []);
myApp.controller('QuestionCtlr', ['$scope', '$log', function($scope, $log) {
$scope.questions = [
["what is 1+1?"],
["what color of the sky"],
["what is the answer to the universe"]
];
$scope.answers = [
2, ["blue, black or orange"],
40
];
$scope.hideme = function(i) {
$log.log("element " + i + " was cicked");
//this will be detemined within a fct, so lets asume the has the according rights
var userPrivilege = true;
if (userPrivilege) {
//HOW TO: show the answer with the index i
}
}
}]);<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<!-- angular -->
<script src="https://code.angularjs.org/1.4.0/angular.min.js"></script>
<script src="app.js"></script>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body ng-controller=QuestionCtlr>
<table class="table table-hover">
<thead>
<tr>
<th>Question</th>
<th>Answer</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="q in questions track by $index">
<td>{{q[0]}}</td>
<td class = "ng-hide">{{q[0]}}</td>
<td>
<button type="button" ng-click="hideme($index)" class="btn btn-default">show me</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>推荐答案
这是一个完整的工作示例.
我改变的东西:
- 答案现在存储为每个问题的属性.这使代码更整洁(无需
通过 $index跟踪). - ng-show 指令用作属性而不是类，并绑定到问题的
showAnswers属性. - 当您单击按钮时，
showme函数会将showAnswers属性设置为true.
- The answers are now stored as a property of each question. This makes the code neater (no need to
track by $index). - The ng-show directive is used as an attribute instead of a class, and is bound to a
showAnswersproperty of the question. - The
showmefunction sets theshowAnswersproperty totruewhen you click the button.
var myApp = angular.module('myApp', []);
myApp.controller('QuestionCtlr', ['$scope', '$log', function($scope, $log) {
$scope.questions = [
{question: "what is 1+1?", answers: [2]},
{question: "what color of the sky", answers: ["blue", "black", "orange"]},
{question: "what is the answer to the universe", answers: [42]}
];
$scope.showme = function(q) {
$log.log("question " + q.question + " was cicked");
var userPrivilege = true;
if (userPrivilege) {
q.showAnswers = true;
}
}
}]);<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<!-- angular -->
<script src="https://code.angularjs.org/1.4.0/angular.min.js"></script>
<script src="app.js"></script>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body ng-controller=QuestionCtlr>
<table class="table table-hover">
<thead>
<tr>
<th>Question</th>
<th colspan="2">Answer</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="q in questions">
<td >{{q.question}}</td>
<td ng-show="q.showAnswers">
<div ng-repeat="a in q.answers">{{a}}</div>
</td>
<td>
<button type="button" ng-click="showme(q)" class="btn btn-default">show me</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>这篇关于angular方式:按钮点击后显示或隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
