如何在AngularJs 1.0中綁定動態屬性名稱或列表Html表達式

Question

我在將數據綁定到angularJs 1.0時遇到了一個問題。

我通過樞軸查詢與動態列名從數據庫讀取數據，

，但我沒有能夠將數據綁定到angularJs HTML表達，

可以在這裏的任何一個建議我如何我可以做到這一點。我的數據如下所示。

[{"5V00L":"Charcoal","T200":"No Color","GradeName":"Pre Kindergarten","GradeLevelId":10},{"5V00L":"Sapphire","T200":"Heather Grey & Red","GradeName":"Kindergarten","GradeLevelId":11},{"5V00L":"No Color","T200":"Gold & Navy","GradeName":"1st Grade","GradeLevelId":14},{"5V00L":"No Color","T200":"White & Lime Shock","GradeName":"Grade-Name","GradeLevelId":27}] 

在此 5V00L和 T200

是動態的列名。 所以，請幫助我如何我可以在這兩個列屬性在我angulrJs HTML表達綁定像object.GradeName

Answer 1

var obj = { 5V00L: "Charcoal", T200: "No Color", GradeName: "Pre Kindergarten", GradeLevelId: 10}; 

var firstDynamicVal = obj[Object.keys(obj)[0]]; 
var secondDynamicVal = obj[Object.keys(obj)[1]]; 
console.log("First Value: "+firstDynamicVal+", Second Value: "+secondDynamicVal); 

你可以試試這個得到前兩個值。但是，只有當財產的順序保持不變時，此解決方案纔會起作用。

Answer 2

花2-3小時後解決這個問題，我發現下面的方式。 我對象的名單是：

[{"5V00L":"Charcoal","T200":"No Color","GradeName":"Pre Kindergarten","GradeLevelId":10},{"5V00L":"Sapphire","T200":"Heather Grey & Red","GradeName":"Kindergarten","GradeLevelId":11},{"5V00L":"No Color","T200":"Gold & Navy","GradeName":"1st Grade","GradeLevelId":14},{"5V00L":"No Color","T200":"White & Lime Shock","GradeName":"Grade-Name","GradeLevelId":27}] 

5V00L和T200是兩個第一動態特性。 創建一個角度函數。

$scope.ObjectKey = function (obj) { 
     return Object.keys(obj); 
    } 

我已經使用這個功能在我的HTML象下面這樣：

<div ng-repeat="color in Colors"> 
        <div style="width: 33%; float: left"> 
         {{color[ObjectKey(color)[0]]}} 
        </div > 

        <div style="width: 33%; float: left"> 
         {{color[ObjectKey(color)[1]]}} 
        </div> 

       </div> 

Answer 3

作爲每ECMAScript Third Edition (pdf)：

4.3.3對象

一個目的是的一個構件鍵入Object。它是一個無序 集合屬性其中每個屬性包含原始值，對象或函數。存儲在對象屬性中的函數是 ，稱爲方法。

這意味着你不能確定你的自定義屬性會有0和1的索引。

而不是希望他們永遠是第一個，更好的方法是列出與ng-repeat循環的所有屬性並隱藏那些預定義的。

HTML：

<div ng-repeat="item in list"> 
     <div ng-repeat="(key, value) in item"> 
     <p ng-hide="!isCustomProperty(key)"> 
      <b ng-bind="key"></b>: <span ng-bind="value"></span> 
     </p> 
     </div> 
    </div> 

JS：

var predefinedProperties = ['GradeName', 'GradeLevelId']; 

$scope.isCustomProperty = function (prop) { 
    return predefinedProperties.indexOf(prop) < 0; 
}; 

這裏jsfiddle與工作示例

UPDATE

甚至更​​好的解決辦法是將存儲您的動態屬性作爲對象的數組。

例如：

[{ 
    "GradeName":"Pre Kindergarten", 
    "GradeLevelId":10, 
    "Attributes": [ 
     { 
      "key": "5V00L", 
      "value": "Charcoal" 
     }, { 
      "key": "T200", 
      "value": "No Color" 
     } 
    ] 
}, { 
    "GradeName":"Kindergarten", 
    "GradeLevelId":11, 
    "Attributes": [ 
     { 
      "key": "5V00L", 
      "value": "Sapphire" 
     }, { 
      "key": "T200", 
      "value": "Heather Grey & Red" 
     } 
    ] 
}, { 
    "GradeName":"1st Grade", 
    "GradeLevelId":14, 
    "Attributes": [ 
     { 
      "key": "5V00L", 
      "value": "No Color" 
     }, { 
      "key": "T200", 
      "value": "Gold & Navy" 
     } 
    ] 
}, { 
    "GradeName":"Grade-Name", 
    "GradeLevelId":27, 
    "Attributes": [ 
     { 
      "key": "5V00L", 
      "value": "No Color" 
     }, { 
      "key": "T200", 
      "value": "White & Lime Shock" 
     } 
    ] 
}];