个人中心
gpt4 book ai didi

javascript - : show or hide element after button click 的 Angular 方式

转载 作者：塔克拉玛干 更新时间：2023-11-02 23:03:08 24 4
gpt4 key购买 nike

我对 Angular 还很陌生，我做对了。

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

我必须做些什么才能删除单击按钮所在行中的“ng-hide”类。

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

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 指令用作属性而不是类，并绑定(bind)到问题的 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>

关于javascript - : show or hide element after button click 的 Angular 方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31318924/

24 4 0
文章推荐： javascript - 基于 IndexedDB 规范，为什么打开的数据库连接会在 indexedDB.deleteDatabase 调用时关闭？
文章推荐： c++ - new 和 new[1] 有什么区别？
文章推荐： c++ - g++ 字符串 remove_if 错误
文章推荐： javascript - javascript/jquery 中的 LinQ foreach
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com