ng-repeat不使用对象对象

时间：2017-07-03 06:07:48

标签： angularjs angularjs-ng-repeat

我的对象对象中有数据但 ng-repeat 没有向我显示我的数据是json格式如下：

     {
      "0": [
        {
          "question": "How often is real property re-assessed (or revalued)?",
          "id": 1,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 0
        },
{
          "question": "How often is real property re-assessed (or revalued)?",
          "id": 1,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 0
        },
        {
          "key": "Survey Meta Data"
        }
      ],
      "1": [
        {
          "question": "When are New Assessment Notices sent out?",
          "id": 2,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 1
        },
        {
          "key": "Assessment"
        }
      ]
    }

我希望显示所有问题和关键如何实现这一点我正在尝试这样的事情：

<div class="form-group" ng-repeat="data in viewQuestions">
                   <div  ng-repeat="values[$index] in data ">
                   <label for="comment">{{values.questions}}</label>
                   </div>
                   <label for="comment">{{data.key}}</label>
                  <textarea class="form-control" rows="2" id="comment"></textarea>
                  </div>

4 个答案:

答案 0 :(得分：2)

你需要这个，

<div class="form-group" ng-repeat="(key,value) in viewQuestions  track by $index">
  <div  ng-repeat="values in value ">
   <label for="comment">{{values.question}}</label>
   <label for="comment">{{values.key}}</label>
   <textarea class="form-control" rows="2" id="comment"></textarea>
 </div>
</div>

<强>样本 

var pegasusWebApp = angular.module('ReqWebApp', [])

pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
    $scope.viewQuestions = {
  "0": [
    {
      "question": "How often is real property re-assessed (or revalued)?",
      "id": 1,
      "section": "Assessment",
      "sectionId": 2,
      "check": true,
      "index": 0
    },
    {
      "question": "How often is real property re-assessed (or revalued)?",
      "id": 1,
      "section": "Assessment",
      "sectionId": 2,
      "check": true,
      "index": 0
    },
    {
      "key": "Survey Meta Data"
    }
  ],
  "1": [
    {
      "question": "When are New Assessment Notices sent out?",
      "id": 2,
      "section": "Assessment",
      "sectionId": 2,
      "check": true,
      "index": 1
    },
    {
      "key": "Assessment"
    }
  ]
};
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
    <meta charset="UTF-8">
    <title>New Request</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ReqAppController">
    <div class="form-group" ng-repeat="(key,value) in viewQuestions  track by $index">
        <div ng-repeat="values in value ">
            <label for="comment">{{values.question}}</label>
            <label for="comment">{{values.key}}</label>
            <textarea class="form-control" rows="2" id="comment"></textarea>
        </div>
    </div>
</body>
</html>

答案 1 :(得分：1)

删除ng-repeat中的$index。

另外，将{{values.questions}}更改为{{values.question}} 

<div class="form-group" ng-repeat="data in viewQuestions">
   <div  ng-repeat="values in data "> 
      <label >{{values.question}}</label>
   </div>
   <label for="comment">{{data.key}}</label>
   <textarea class="form-control" rows="2" id="comment"></textarea>
</div>

演示

angular.module("app",[])
.controller("ctrl",function($scope){
  $scope.viewQuestions = {
      "0": [
        {
          "question": "How often is real property re-assessed (or revalued)?",
          "id": 1,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 0
        },
{
          "question": "How often is real property re-assessed (or revalued)?",
          "id": 1,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 0
        },
        {
          "key": "Survey Meta Data"
        }
      ],
      "1": [
        {
          "question": "When are New Assessment Notices sent out?",
          "id": 2,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 1
        },
        {
          "key": "Assessment"
        }
      ]
    }

})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div class="form-group" ng-repeat="data in viewQuestions"> 
                   <div  ng-repeat="values in data "> 
                   <label >{{values.question}}</label>
                   </div>
                   <label for="comment">{{data.key}}</label>
                  <textarea class="form-control" rows="2" id="comment"></textarea>
                  </div>
</div>

答案 2 :(得分：0)

＆＃13;
＆＃13; 
angular.module("Myapp",[])
.controller("Myctrl",function($scope){
$scope.viewQuestions = {
      "0": [
        {
          "question": "How often is real property re-assessed (or revalued)?",
          "id": 1,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 0
        },
{
          "question": "How often is real property re-assessed (or revalued)?",
          "id": 1,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 0
        },
        {
          "key": "Survey Meta Data"
        }
      ],
      "1": [
        {
          "question": "When are New Assessment Notices sent out?",
          "id": 2,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 1
        },
        {
          "key": "Assessment"
        }
      ]
    }
  })
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <div ng-app="Myapp" ng-controller="Myctrl">
  <div class="form-group" ng-repeat="(key,val) in viewQuestions  track by $index">
    <div  ng-repeat="v in val ">
        <label for="comment">{{v.question}}</label>
    </div>
    <label for="comment">{{val.key}}</label>
    <textarea class="form-control" rows="2" id="comment">       </textarea>
  </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

以下是JsFiddle link

<强> HTML 

    <div ng-app="myApp">

      <div ng-controller="ctrl">
        <div ng-repeat="obj in data">
          <div ng-repeat="item in obj">
            <label ng-if="item.question">Question:{{item.question}}</label>
            <label ng-if="item.key">Key: {{item.key}}</label>
            <br>
            <textarea ng-if="item.key" class="form-control" rows="2" id="comment">
            </textarea>
            <hr>
          </div>

        </div>
      </div>
    </div>

JS代码 

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

  app.controller('ctrl', function($scope) {
    $scope.data = {
      "0": [{
        "question": "How often is real property re-assessed (or revalued)?",
        "id": 1,
        "section": "Assessment",
        "sectionId": 2,
        "check": true,
        "index": 0
      }, {
        "question": "How often is real property re-assessed (or revalued)?",
        "id": 2,
        "section": "Assessment",
        "sectionId": 2,
        "check": true,
        "index": 0
      }, {
        "key": "Survey Meta Data"
      }],
      "1": [{
        "question": "When are New Assessment Notices sent out?",
        "id": 2,
        "section": "Assessment",
        "sectionId": 2,
        "check": true,
        "index": 1
      }, {
        "key": "Assessment"
      }]
    };
  });

这将根据您的需要打印出来。

相关问题
最新问题