2016-05-21 65 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只能通過數組和迭代器,所以沒有它不會這樣做。

解決方案是爲每個列可以有多個值,您先將它們轉換爲數組。如果你有多個僱員對象,你必須將他們包裝在數組中,那麼外部聘用/程序員對象也是如此。