2014-12-22 36 views
3

我有一個存儲對象的容器,這些對象按照它們的標識在散列中進行索引。來自對象鍵的角UI網格行

myObjs = { 
    "hello id":{ 
    foo:"hello foo data", 
    bar:"hello bar data" 
    }, 
    "world id":{ 
    foo:"world foo data", 
    bar:"world bar data" 
    } 
} 

我想在myObjs每個對象綁定到一個行中的一個UI的網格(http://ui-grid.info/)。在一般的表它看起來像:

<table> 
    <tr ng-repeat="(id, obj) in myObjs"> 
     <td>{{id}}</td> 
     <td>{{obj.foo}}</td> 
     <td>{{obj.bar}}</td> 
    </tr> 
</table> 

一種解決方案是獲得來自myObjs作爲輸入數據到UI電網使用的內容對象的新陣,但是這將意味着我將不得不維護myObjs與派生數組輸入之間的綁定。

有沒有一種更自然的方式將ui-grid綁定到myObjs?

回答

-1

你可以提供一個小提琴/ plunk,顯示你正在嘗試做什麼? ng-repeat可以遍歷一個對象,就像它可以迭代一個數組一樣,所以不需要從對象中創建派生數組。

我創建了一個在這裏:Plunk 它看起來像它的正常工作,所以我不知道是什麼問題。

HTML:

<html ng-app="App"> 
    <head> 
     <title>AngularJS Plunker</title> 

     <!-- AngularJS - MVVM Pattern --> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> 

     <!-- Page Specific --> 
     <script src="client.js"></script> 

    </head> 

    <body ng-controller="Controller"> 

     <table border="1"> 
     <tr ng-repeat="(id, obj) in myObjs"> 
      <td>{{id}}</td> 
      <td>{{obj.foo}}</td> 
      <td>{{obj.bar}}</td> 
     </tr> 
     </table> 

    </body> 
</html> 

JS:

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

app.controller('Controller', function ($scope) { 

    $scope.myObjs = { 
    "hello id":{ 
     foo:"hello foo data", 
     bar:"hello bar data" 
    }, 
    "world id":{ 
     foo:"world foo data", 
     bar:"world bar data" 
    } 
    } 

}); 
+1

啊,這是直線前進用香草角和香草表。我正在嘗試使用angular-ui-grid(http://ui-grid.info/)而不是香草表來做類似的事情。我會將這個鏈接添加到我的問題中,使其更加清晰。 – natb1