【问题标题】:Angular ng-repeat to list all items in object with unknown property namesAngular ng-repeat 列出对象中具有未知属性名称的所有项目
【发布时间】:2014-06-17 02:05:26
【问题描述】:

我对(真正的)javascript 和 Angular 还是很陌生

我正在为家庭自动化编写应用程序。该应用程序会返回设备列表,然后当您单击设备时,它会通过 JSON(示例如下)返回其详细信息。我遇到的问题是不同的设备类型在对象中返回不同的名称值对,我不会提前知道这些。 (例如,电灯开关将返回昏暗级别,但恒温器返回传感器级别。

显然,我的应用程序只能执行具有已知属性的操作(例如,如果是灯光,则设置暗淡级别),但用户可能希望查看所有属性。他们是一种在不知道属性名称的情况下使用 ng-repeat 列出所有名称值对的方法吗?

例子:

 {
    "name": "1-Wire Test1",
    "address": 0,
    "addressStr": "unknown",
    "classID": 3,
    "devProtocol": 999,
    "displayInUI": true,
    "displayLongState": "76.7 °F",
    "displayRawState": "76.700000",
    "folderID": 1418405935,
    "hasStateToDisplay": true,
    "id": 704024169,
    "lastChanged": 456266814,
    "lastChangedDateStr": "2014-06-16",
    "lastChangedRFC3339": "2014-06-17T01:46:54Z",
    "lastChangedRFC822": "Tue, 17 Jun 2014 01:46:54 GMT",
    "lastChangedTimeStr": "08:46:54 PM",
    "sensorValue": "76.7 °F",
    "type": "1-Wire Temperature Sensor",
    "typeFlags": 81,
    "typeSupportsDim": false,
    "typeSupportsEnergyMeter": false,
    "typeSupportsHVAC": false,
    "typeSupportsIO": false,
    "typeSupportsOnOff": false,
    "typeSupportsSensorValue": true,
    "typeSupportsSpeedControl": false,
    "typeSupportsSprinkler": false,
    "versByte": 0,
    "restParent": "devices"
}

【问题讨论】:

    标签: angularjs angularjs-ng-repeat


    【解决方案1】:

    当然,使用(k, v) in o 重复语法:

    例如:

    <span ng-repeat="(property, value) in phoneProperties">{{property}} : {{value}}</span>
    

    【讨论】:

    • 太棒了。非常感谢。希望我能在速度方面给你加分 :-) 马克
    【解决方案2】:
    var anObject = {randomName: "foo",
                    randomNameNumber100: "bar"};
    

    在模板中

    <div ng-repeat="(key, val) in anObject">
      <p>{{ key }}</p>
      <p>{{ val }}</p>
    </div>
    

    这将根据键以排序方式显示您的对象。

    【讨论】:

    • 这个排序是什么样子的?恕我直言,输出将与原始数组中确定的相同,不是吗?对于排序内容,需要使用类似“OrderBy”之类的过滤器,请参阅:stackoverflow.com/questions/14478106/…
    猜你喜欢
    • 2017-01-17
    • 1970-01-01
    • 2019-05-13
    • 2015-11-09
    • 1970-01-01
    • 1970-01-01
    • 2016-09-01
    • 2014-11-01
    • 2019-04-03
    相关资源
    最近更新 更多