ng-show ng-hide angular questions-answer

Question

我有一個網站，我在其中顯示不同的問題，當你點擊一個出現的答案，如果你再次點擊消失。我試圖在 角度做，但目前我無法實現它。

<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> 

角碼

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

你可以這樣做，所有的模板，例如：

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

點擊<p>將使<span>表演和消失。

Answer 3

每個問題，有自己的答案，所以顯示的答案附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 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>