arrays - 如何在angularjs和html中打印json数组对象数组

标签 arrays json angularjs html

Angularjs Controller

controller('FaqCtrl', function($scope, $http)
{
$http.get("api/index.php/faq/getqusans")
.success(function (response) {
$scope.name = response.catname;

$scope.records = response.catname;

//$scope.question = response.records;

}); 
}).

HTML 代码

<div ng-controller="FaqCtrl" class="row">
<div class="" ng-repeat="y in name">
    <h3>{{ y.name }}</h3><br/>
    <div class="col-md-6" ng-repeat="x in records">

        <accordion close-others="true" >
            <accordion-group is-open="status1.open" ng-class="{'expanded': status1.open}" >
                <accordion-heading>{{ x.question }}</accordion-heading>
                {{ x.answer }}
            </accordion-group>

        </accordion>

    </div>
</div>

Json 响应

{
              "catname": [
                {
                  "name": "How do i 2",
                  "records": [
                    {
                      "question": "propose a new dish",
                      "answer": "Anim "
                    }
                  ]
                },
                {
                  "name": "How do i 3h",
                  "records": [
                    {
                      "question": "supply the dishes being demanded by heartyy",
                      "answer": "Anim"
                    },
                    {
                      "question": "sdsffd",
                      "answer": "vcvcvcvcvcv"
                    }
                  ]
                }
              ]
            }

我没有得到 html 格式的问题和答案打印。只打印名称,如“How do i 2”和“How do i 2”,但名称中有问题“提出一道新菜”并回答“Anim”。

最佳答案

我们需要编写如下html

JSFIDDLE

HTML 代码

  <div ng-app ng-controller="LoginController">
 <div class="col-md-6" ng-repeat="x in parsedData">
<accordion close-others="true">
    <accordion-group is-open="status1.open" ng-class="{'expanded': status1.open}">
        <div>{{ x.name }}</div>
        <div ng-repeat="y in x.records">
            <accordion-heading><p>question is{{ y.question }}</p></accordion-heading>

JS 代码

function LoginController($scope) {
    var dataArr =[];
    var dataJson = {};
    $scope.data = {
              "catname": [
                {
                  "name": "How do i 2",
                  "records": [
                    {
                      "question": "propose a new dish",
                      "answer": "Anim "
                    },
                      {
                      "question": "propose a new dish",
                      "answer": "Anim "
                    },
                      {
                      "question": "propose a new dish",
                      "answer": "Anim "
                    }
                  ]
                },
                {
                  "name": "How do i 3h",
                  "records": [
                    {
                      "question": "supply the dishes being demanded by heartyy",
                      "answer": "Anim"
                    },
                    {
                      "question": "sdsffd",
                      "answer": "vcvcvcvcvcv"
                    }
                  ]
                }
              ]
            };

    $scope.parsedData = $scope.data.catname;
    console.log($scope.parsedData);
};

o/p:

How do i 2
question ispropose a new dish

answer is Anim

question ispropose a new dish

answer is Anim

question ispropose a new dish

answer is Anim

How do i 3h
question issupply the dishes being demanded by heartyy

answer is Anim

question issdsffd

answer is vcvcvcvcvcv

JSFIDDLE

关于arrays - 如何在angularjs和html中打印json数组对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30987648/

相关文章:

arrays - 集合的完全和部分匹配

c++ - 为数组赋值时是否存在性能差异

javascript - 递归和数组

php - 如何在 php 中只提取特定的 json 对象字段值?

json - 异步解析来自请求 GET 调用的 JSON 响应

angularjs - Angular Material Date Picker 默认选择日期

arrays - 将数字数组转换为二进制数

angularjs - Angular Gantt - 如何设置起始日期和截止日期范围以仅显示所需的分钟数?

javascript - HTML 输入范围隐藏缩略图

javascript - Rails 抛出 "REXML::ParseException does not have a valid root"异常