Question

我的json对象包含问题列表，后跟选项。如何显示问题后跟选项。这是我的代码，请检查一次。

Answer 1

试试这个

 <div id="Content1">
      <table>
        <tr ng-repeat = "q in questions">
           <td>{{q.question}}</td>
           <td ng-repeat="answer in q.answers">{{answer.answers}} {{answer.value}}</td>
        </tr>
        </table>
  </div>

Answer 2

你可以这样做：

<div ng-repeat="question in QuestionsList" style="border-bottom:1px solid #000000;">
    <div>{{question.Question}}</div>
    <div ng-repeat="options in question.options">{{options.option}}</div>
<div>

Plunkr：http://plnkr.co/edit/Hfrbalq7dmwzZMDoHzNv?p=preview

我稍微更改了HTML，因此渲染时可以更好地阅读。

根据您的评论进行编辑：

您可以简单地将课程切换为显示/隐藏。我在你的代码中添加了一个指令和一个css文件。

Plunkr：http://plnkr.co/edit/PixQYfE1psUx9OEvSsJQ?p=preview

Answer 3

您可以执行此操作http://plnkr.co/edit/VXrWEgJ77y8NzRU8pQ63?p=preview

<!DOCTYPE html>
<html ng-app="MyApp" ng-strict-di>

  <head>
    <title>my app</title>
    <style>ul { padding-left: 0; } li { list-style: none; }</style>
    <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
    <script>
      document.write('<base href="'+ document.location.pathname +'" />')
    </script>
    <script src="script.js"></script>
  </head> 

  <body ng-app="MyApp">
    <div class="main-content" ng-controller="QuestionCtrl">
      <div id="Content1">
        <div class='question' ng-repeat="question in questions">
          <h2>{{question.question}}</h2>
          <div class='answers' ng-repeat="answer in question.answers">
            <h4>answer {{$index + 1}}</h4>
            <p>{{answer.value}}</p>
            <p>{{answer.answers}}</p>
          </div>
        </div>
      </div>
    </div>
  </body> 
</html>

Answer 4

试试这个，如果你这是对的，请告诉我。

    {{quest.Question}}

    <span ng-repeat = "option in quest.options">
    strong text<br/>
      {{option.option}}
    </span>
    <br/>

Answer 5

添加到上一个答案，使用show将变量ng-init初始化为false。然后使用true在元素点击时将其设置为ng-click。使用ng-show最初隐藏选项。一旦show为真，选项就会显示

<div id="Content1">
  <table>
    <tr ng-repeat = "q in questions">
       <td ng-init="show=false;" ng-click="show=true">{{q.question}}</td>
       <td ng-repeat="answer in q.answers" ng-show="show">{{answer.answers}} {{answer.value}}</td>
    </tr>
    </table>

Answer 6

检查Link。它符合您的要求。单击一个问题将显示相应的答案。

<div ng-repeat="quest in QuestionsList" ng-click='clik($index)'>{{quest.Question}}
    <div ng-show='show === $index'>
      <div ng-repeat="quess in quest.options">{{quess.option}}
      </div>
    </div>
</div>

使用ng-repeat在angularjs中显示json数据

6 个答案: