Question

我有一个网站，我在其中显示不同的问题，当你点击其中一个出现答案，如果你再次点击消失。而我试图这样做 Angular，但目前我无法实现它。

<ul id="question-list">
        <li>
            <h1><a ng-click="answer = !answer" >What is this?</a></h1>
            <h3 ng-show="answer"> this</h3>
        </li>
        <li>
            <h1 >What is the question?</h1>
            <h3>It </h3>
        </li>
        <li>
            <h1>What is the question?</h1>
            <h3> Ipsum.</h3>
        </li>

Angular Code

ehlApp.controller('faqController', function ($scope) {

    $scope.answer = true;

});

Answer 1

您发布的代码在正确设置的应用中完美运行，所以我猜这就是问题所在。

<div ng-app="app" ng-controller="ctrl">
    <ul id="question-list">
        <li>
            <h1><a ng-click="answer = !answer">What is this?</a></h1>
            <h3 ng-show="answer"> this</h3>
        </li>
        <li>
            <h1>What is the question?</h1>
            <h3>It </h3>
        </li>
        <li>
            <h1>What is the question?</h1>
            <h3> Ipsum.</h3>
        </li>
    </ul>
</div>


<script>

    var app = angular.module('app',[]);
    app.controller('ctrl', function ($scope) {
        $scope.answer = true;
    });

</script>

Answer 2

每个问题都有自己的答案，以便显示附上的答案jsbin HTML：

<div ng-app="myApp">
  <div ng-controller="MyCtrl as vm">
   <ul id="question-list" >
     <li ng-repeat = "questionAns in vm.questionList">
      <h1 ng-click="questionAns.showAnswer = !questionAns.showAnswer">             <a ng-bind="questionAns.question"></a></h1>
        <h3 ng-show="questionAns.showAnswer" ng-bind="questionAns.answer"></h3>
    </li>
  </ul>
  </div>

JAVASCRIPT：

var app = angular.module("myApp",[]);

app.controller("MyCtrl", ["$scope", function ($scope) {
     var vm = this;
     vm.questionList = [{
       "question" : "What is this question 1?",
       "answer" : "this is answer1"
     },{
       "question" : "What is this question 2?",
       "answer" : "this is answer2"
     }];
}]);

jsbin to show hide

Answer 3

您可以在模板中执行所有操作，例如：

<p ng-click="x=!x">Something<span ng-show="x"> else</span>.</p>

点击<p>将显示<span>并消失。

Answer 4

   <div ng-app="app" ng-controller="control">
     <ul id="question-list">
        <li>
            <h1><a ng-click="answer = !answer">What is this?</a></h1>
            <h3 ng-show="answer"> this</h3>
        </li>
        ,<li>
            <h1 ng-click="answer = !answer">What is the question?</h1>
            <h3 ng-show="answer">It </h3>
        </li>
        <li>
            <h1 ng-click="answer = !answer">What is the question?</h1>
            <h3 ng-show="answer"> Ipsum.</h3>
        </li>
    </ul>
</div>


<script>
   var app = angular.module('app',[]);
    app.controller('control', function ($scope) {
        $scope.answer = true;
    });

</script>

ng-show ng-hide angular问题 - 答案

4 个答案: