2016-05-21 147 views
0

有人可以帮我制定角度NG-重复创建下面NG重复的键值对

Name: David Smith 
Phone : 734-323-4323 
Email : [email protected] 
Skill : Java, ASP, Oracle 
CanWorkAt: Los Angeles, San Franscisco, Santa Clara 
Reference: Micheal 

我的JSON对象从JSON格式的输出低于

{"ObjectId":"1234", 
    "keyvalues":[ 
      {"key":"Name","value":"David Smith"}, 
      {"key":"Phone","value":"734-323-4323"}, 
      {"key":"Email","value":"[email protected]"}, 
      {"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"} 
      ] 
} 
+0

您在阅读https://docs.angularjs.org/api/ng/directive/ng重复之后尝试了什么? – randominstanceOfLivingThing

+0

下面的ng-repeat列出了所有的键。

{{keyValue.key }} : {{keyValue.value }}

回答

0

脚本.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":"[email protected]"}, 
 
      {"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>

0

你在这里所面临的问题是:

  • 你给JSON的样品没有/包本身在方括号中为数组。使用json对象,只有一种方式可以访问数据,即通过键值对的键。
  • 而ng-repeat只能通过数组和迭代器,所以没有它不会这样做。

解决方案是为每个列可以有多个值,您先将它们转换为数组。如果你有多个雇员对象,你必须将他们包装在数组中,那么外部聘用/程序员对象也是如此。