Question

我的模型数据如下：

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

但我希望在html中首先显示键，然后再显示我的所有问题

注意： 如果我撤消我的数据，那么问题是关键会先显示，但问题顺序也会反转我不想反转我的问题，简而言之我想要的是首先显示密钥，然后数据格式必须保持相同 即将其键推到顶部索引 就像这样：

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

  ]
}

或

     {
  "0": [
    {
      "question": "How often is real property re-assessed (or revalued)?",
      "id": 1,
      "section": "Assessment",
      "sectionId": 2,
      "check": true,
      "index": 0
    },
    {
      "question": "How often second?",
      "id": 3,
      "section": "Assessment",
      "sectionId": 2,
      "check": true,
      "index": 0
    },
    {
      "question": "How often third?",
      "id": 2,
      "section": "Assessment",
      "sectionId": 2,
      "check": true,
      "index": 0
    },

      "key": "Survey Meta Data"

  ],
  "1": [
    {
      "question": "When are New Assessment Notices sent out?",
      "id": 3,
      "section": "Assessment",
      "sectionId": 2,
      "check": true,
      "index": 1
    },

      "key": "Assessment" //treat it as object value not object of object

  ]
}

目前我的带有ng-repeat的html工作不正常它基本上先迭代问题，然后键显示但是我先问题然后是关键：

    <div ng-repeat="data in viewQuestions">
<div class="panel panel-default"  ng-repeat="value in data">
     {{value.key}}

   label>{{value.question}} </label>

     </div>
      </div>

Answer 1

更好的选择是从api中正确格式化数据，但如果由于某种原因你不能，你可以在获取数据后执行以下操作：

<html ng-app="QuestionsApp">
<body ng-controller="QuestionsController">
  <div ng-repeat="data in viewQuestions">
    <div class="panel panel-default"  ng-repeat="value in data | orderBy : 'showIndex'">
      <strong ng-if="value.key">{{value.key}}</strong>
      <label ng-if="value.question">{{value.question}}</label>
    </div>
    <br>
  </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script>
  var QuestionsApp = angular.module('QuestionsApp', []);

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

    angular.forEach(apiResponse, function (questions) {
      angular.forEach(questions, function (question, index) {
        if (question.key) question.showIndex = keyIndex;
        else question.showIndex = index;
      });
    });

    $scope.viewQuestions = apiResponse;
  });
</script>
</html>

诀窍是添加showIndex字段和value in data | orderBy : 'showIndex'

显示最后内容的对象的角度js对象

1 个答案: