如何在 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表达式Like对象中绑定这两个列属性。年级名称

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 第三版 (pdf(：

4.3.3 对象

对象是对象类型的成员。它是一个无序的 属性的集合，每个属性都包含一个基元值， 对象或函数。存储在对象属性中的函数是 称为方法。

这意味着您无法确定自定义属性是否具有 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

更新

甚至更好的解决方案是将动态属性存储为对象数组。

例如：

[{
    "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"
        }
    ]
}];