【问题标题】:How to get name of json object with angular如何使用角度获取json对象的名称
【发布时间】:2016-05-11 09:55:34
【问题描述】:

我正在尝试从我的数据集中获取 json 对象的名称(bdev0,在这种情况下为 bdev1)。

到目前为止,我已经尝试了 ng-options,但没有成功。我在下面的代码中试图实现的只是检索 json 对象的名称。到目前为止,我尝试过的所有示例都不适用于我的情况。

jsfiddle

代码:

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.data = [{
        "Block_Devices": {
            "bdev0": {
                "Backend_Device_Path": "/dev/ram1",
                "Capacity": "16777216",
                "Bytes_Written": 1577,
                "timestamp": "4365093970",
                "IO_Operations": 17757,
                "Guest_Device_Name": "vdb",
                "Bytes_Read": 17793,
                "Guest_IP_Address": "192.168.26.88"
            },
            "bdev1": {
                "Backend_Device_Path": "/dev/ram2",
                "Capacity": "16777216",
                "Bytes_Written": 1975,
                "timestamp": "9365093970",
                "IO_Operations": 21380,
                "Guest_Device_Name": "vdb",
                "Bytes_Read": 20424,
                "Guest_IP_Address": "192.168.26.100"
            }
        },
        "Number of Devices": 2
    }]

}

HTML

<div ng-controller="MyCtrl">
  <select name="Block_Devices" ng-model="selectedDevice"  ng-options="value.Block_Devices for value in data">
  <option value="">Please Select Device</option>
    </select>
</div>
Selected Device = {{selectedDevice}}

【问题讨论】:

    标签: javascript jquery angularjs json


    【解决方案1】:

    您可以使用ng-repeat="(key, value) in array" 语法。

    <div ng-repeat="(key, value) in data[0].Block_Devices">
    {{key}}
    </div>
    

    {{key}} 将是 Block_Devices 的属性
    查看示例jsfiddle

    【讨论】:

    • ng-options="key for (key, value) in data[0].Block_Devices" 将在选择中工作
    【解决方案2】:

    正如 Bon 在我之前所说的,你可以像 jsfiddle 那样做

      <select name="Block_Devices" ng-model="selectedDevice.Bytes_Written" ng-options="key for (key, value) in data[0].Block_Devices">
        <option value="">Please Select Device</option>
      </select>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-01-07
      • 2020-05-31
      • 2016-05-15
      • 1970-01-01
      • 2011-10-28
      相关资源
      最近更新 更多