将项目从JSON对象推送到角度js中的下拉列表答案

【问题标题】：Pushing items from JSON objects to dropdown in angular js将项目从JSON对象推送到角度js中的下拉列表
【发布时间】：2016-02-10 13:16:02
【问题描述】：

我有一个json文件

var myJson = {
   "Number of Devices":2,
   "Block Devices":{
      "bdev0":{
         "Backend_Device_Path":"/dev/ram1",
         "Capacity":"16777216",
         "Bytes_Written":9848,
         "timestamp":"4365093970",
         "IO_Operations":87204,
         "Guest_Device_Name":"vdb",
         "Bytes_Read":107619,
         "Guest_IP_Address":"192.168.26.88"
      },
      "bdev1":{
         "Backend_Device_Path":"/dev/ram2",
         "Capacity":"16777216",
         "Bytes_Written":10062,
         "timestamp":"9365093970",
         "IO_Operations":93789,
         "Guest_Device_Name":"vdb",
         "Bytes_Read":116524,
         "Guest_IP_Address":"192.168.26.100"
      }
   }
}

我想在下拉菜单中推送块设备的名称。在查看了一些示例后，名称是 bdev0 和 bdev1 我尝试了以下代码，但我只是在下拉列表中返回 [Object object]

查看

<select ng-model="selectedDevice" ng-options="item as devices['Block Devices'] for item in selectdevice">
    <option value="">Select Device</option>
   </select>

和控制器

    .controller('timeSeriesCtrl', function($scope, $timeout, $http) {

    $scope.selectedDevice = null;
    $scope.selectdevice = [];
    $scope.bytesRead = [];
    $scope.bytesWritten = [];
    $scope.IoOps = [];
    $scope.currentTime = [];
    var path = 'http://orbit5.ds.cs.umu.se:8888/vrio/debug/blk'


function getData(){
  $http.get(path)
  .success(function(data){
    $scope.devices = data
    angular.forEach($scope.devices['Block Devices'], function(value, key){

           $scope.selectdevice = key;
})


  })
}

getData();





  });

【问题讨论】：

你想要ng-options="item.displayName as item for item in devices['Block Devices']"
它仍然只是返回 [Object object]
注意：请使用服务来发出 HTTP 请求.

标签： javascript jquery angularjs json

【解决方案1】：

删除forEach 的所有代码，只对ng-options 使用(key,value) 语法

function getData(){
  $http.get(path)
  .success(function(data){
    $scope.devices = data
    //angular.forEach($scope.devices['Block Devices'], function(value, key){
       //$scope.selectdevice = key;
    //   value.key = key;
    //})
  });

在html中：

<select ng-model="selectedDevice" 
      ng-options="item as key  for (key,item) in devices['Block Devices'] ">
    <option value="">Select Device</option>
</select>

小提琴：https://jsfiddle.net/ncapito/4mqFJ/6/

【讨论】：

给我错误错误：[$parse:syntax] 语法错误：令牌“as”是表达式 [item.key as devices['Block Devices']] 开始的第 10 列的意外令牌在 [as devices['Block Devices']].
所以我更新了它，我什至没有看到你是如何设置设备的。我假设我展示的是正确的设置。
抱歉刚刚更新了代码你现在可以看到我是如何设置设备的
我想我知道你想做什么，我大大简化了它。
您的原始答案没有 (key, value) 技巧。在我发布我的答案后它得到了更新。我刚刚验证了这一点。

【解决方案2】：

object.toString() = [object object].Object.prototype.toString()

您可以使用(key, content) 语法来显示键。

<select ng-model="selectedItem">
      <option ng-repeat="(key, content) in myjson['Block Devices']" value="{{item}}">{{key}}</option>
</select>

【讨论】：

不需要ng-repeat 你可以使用ng-options 来做同样的事情。