angular 方式：点击按钮后显示或隐藏元素

Question

我是 angular 的新手，我不太了解。

在下面的示例中，我试图在用户单击相应按钮后显示问题的答案。在显示答案之前，我想运行一个检查用户是否有权显示答案的函数。在这个例子中，我假设他有权利。

我需要做什么才能删除单击按钮所在行中的 "ng-hide" class。

我感谢任何形式的帮助。提前致谢

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>

Answer 1

好的，首先你可以使用

ng-if="condition"   //gets only rendered if condition is true
ng-show="condition" //shows when condition is true 
ng-hide="condition" //hides when condition is true

所以在你的按钮上

ng-click="showAnswer()"

在你的控制器中

$scope.displayAnswer = false;
$scope.showAnswer = function(){
  if(hasRights == true){
      $scope.displayAnswer = true //this is used for the hide and show
   }
}

在你的html 3 种可能的方式

<span ng-if="displayAnswer == true">This is the answer!!!</span>

<span ng-show="displayAnswer == true">This is the answer!!!</span>

<span ng-hide="displayAnswer == false">This is the answer!!!</span>

<button ng-click="showAnswer()">This is the answer!!!</span>

带开关的第二个解决方案

如果你想在同一个按钮上再次隐藏答案这显示和隐藏按钮取决于它当前是显示还是隐藏

$scope.toggleAnswer = function(displayAnswer){
  if(hasRights == true && $scope.displayAnswer == false){
      $scope.displayAnswer = true //this is used for the hide and show
   }else if($scope.displayAnswer == true){
      $scope.displayAnswer = false;
   }
}

第二 Html

<span ng-if="displayAnswer == true">This is the answer!!!</span>
<button ng-click="toggleAnswer(displayAnswer)">This is the answer!!!</span>

你的情况

<button ng-click="toggleAnswer($index)">Hide / Show</button>

并在您的控制器中

  $scope.answers = [{A: 2, show: false},{A: 'blue', show: false}]
 $scope.toggleAnswer = function(index){
  if(hasRights == true){
      $scope.answers[index].show = true //this is used for the hide and show
   }
}

在HTML

<span ng-if="item.show == true">The Answer !!</span>
//the item is coming from item in Answers from the ng-repeat

Answer 2

考虑到你的 'privilege' 请求，我想你会想创造一个条件。不要添加 class ng-hide，而是像这样使用 ng-hide、ng-show 或 ng-if：

<td ng-show="hasPrivilege && show[$index]">
    <!--or ng-hide or ng-if-->

和您的按钮：

<button type="button" ng-click="hideme($index)">

如果两个陈述都为真，这将显示 td。如果其中一项或两项为假，则不会显示该元素。

然后在你的控制器中：

$scope.hideme = function(index) {
    $scope.hasPrivilege = getPrivilege();
    $scope.show[index] = true;
}

getPrivilege() 函数应该 return true 或 false 基于用户是否有权限。

Answer 3

这是一个完整的工作示例。

我改变的事情：

答案现在存储为每个问题的属性。这使代码更整洁（不需要track by $index）。
ng-show 指令用作属性而不是 class，并绑定到问题的 showAnswers 属性。
当您单击按钮时，showme 函数将 showAnswers 属性设置为 true。

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>

Answer 4

在html

中尝试

<table class="table table-hover">
        <thead>
            <tr>
                <th>Question</th>
                <th>Answer</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="q in questions">
                <td>{{q[0]}}</td>
                <td ng-class="{hide : active != $index}">{{answers[$index]}}</td>
                <td>
                    <button type="button" ng-click="hideme($index)" class="btn btn-default">show me</button>
                </td>
            </tr>
        </tbody>
    </table>

angular

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.active = null;
    $scope.hideme = function(i) {
        $scope.active = i; 
    }
}]);

Fiddle

angular 方式：点击按钮后显示或隐藏元素

angular Way of: show or hide element after button click

javascript

angularjs

ng-repeat