键值对的ng-repeat

时间:2016-05-21 00:39:59

标签: angularjs ng-repeat

有人可以帮我制定Angular ng-repeat来创建json下面的格式化输出

Name: David Smith
Phone : 734-323-4323
Email : abcd@yahoo.com
Skill : Java, ASP, Oracle
CanWorkAt: Los Angeles, San Franscisco, Santa Clara
Reference: Micheal

我的json对象位于

之下
{"ObjectId":"1234",
    "keyvalues":[
            {"key":"Name","value":"David Smith"},
            {"key":"Phone","value":"734-323-4323"},
            {"key":"Email","value":"abcd@yahoo.com"},
            {"key":"Skill","value":"Java"},
            {"key":"Skill","value":"ASP"},
            {"key":"Skill","value":"Oracle"},
            {"key":"CanWorkAt","value":"Los Angeles"},
            {"key":"CanWorkAt","value":"San Franscisco"},
            {"key":"CanWorkAt","value":"Santa Clara"},
            {"key":"Reference","value":"Micheal"}
             ]
}

2 个答案:

答案 0 :(得分:0)

script.js



(function(angular) {
  'use strict';
angular.module('ngRepeat', ['ngAnimate']).controller('repeatController', function($scope) {
  $scope.objects = 
  [
    { "ObjectId":"1234",
      "keyvalues":
      [
          {"key":"Name","value":"David Smith"},
          {"key":"Phone","value":"734-323-4323"},
          {"key":"Email","value":"abcd@yahoo.com"},
          {"key":"Skill","value":"Java"},
          {"key":"Skill","value":"ASP"},
          {"key":"Skill","value":"Oracle"},
          {"key":"CanWorkAt","value":"Los Angeles"},
          {"key":"CanWorkAt","value":"San Franscisco"},
          {"key":"CanWorkAt","value":"Santa Clara"},
          {"key":"Reference","value":"Micheal"}
      ]
    }
  ];
});
})(window.angular);

<body ng-app="ngRepeat">
  <div ng-controller="repeatController">
  <ul>
    <ol class="animate-repeat" ng-repeat="obj in objects | filter:q as results">
       ObjectId: {{obj.ObjectId}} 
      <li class="animate-repeat" ng-repeat="key in  obj.keyvalues ">
        {{key.key}} {{key.value}}
      </li>
    </ol>
    <li class="animate-repeat" ng-if="results.length == 0">
      <strong>No results found...</strong>
    </li>
  </ul>
</div>
</body>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你在这里遇到的问题是:

  • 你给的json样本没有将自己包装在方括号/数组中。对于json对象,只有一种方法可以访问数据,即通过键值对&#39;键。
  • 而ng-repeat只能通过数组和迭代,所以没有它不会做到。

解决方案是针对每个可以有多个值的列,首先将它们转换为数组。如果你有多个员工对象,你必须将它们包装在数组中,外部的employees / programmer对象也是如此。