ng-options遍历对象内的对象数组？

Question

我有这个对象格式

{
      first_name : "Bob",
      last_name : "Smith",
      addresses : [
        {address:"1 Baker Street",
          city: "london"
        },
        {address:"2 Baker Street",
          city: "london"
        }
        ]
    }

我想在选择下拉列表中设置地址位，例如“ 1 Baker Street”，“ 2 Baker Street”，

这是我的代码

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedAddress" ng-options="item for item in testObject">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.testObject =     {
          first_name : "Bob",
          last_name : "Smith",
          addresses : [
            {address:"1 Baker Street",
              city: "london"
            },
            {address:"2 Baker Street",
              city: "london"
            }
            ]
        }
});
</script>

</body>
</html>

我正在努力寻找如何使用AngularJS遍历对象的方法。 有什么帮助吗？

Answer 1

您必须调用array的子对象和属性。 看一下这段代码。

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.testObject = { first_name : "Bob", last_name : "Smith", addresses : [ {address:"1 Baker Street", city: "london" }, {address:"2 Baker Street", city: "london" } ] } });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedAddress" ng-options="item.address for item in testObject.addresses"> </select> </div>

Answer 2

检查一下：

 <select ng-model="selectedItem" 
         ng-options="selectedItem as selectedItem.address       
                     for selectedItem in testObject.addresses">  
</select>

您还可以将默认的selectedItem设置为列表中的第一项

$scope.selectedItem = $scope.testObject.addresses[0];

演示版

ng-options遍历对象内的对象数组？

问题描述

2 个解决方案

解决方案1
4 已采纳 2017-04-12 13:11:36

解决方案2
1 2017-04-12 13:13:59

ng-options遍历对象内的对象数组？

问题描述

2 个解决方案

解决方案1 4 已采纳 2017-04-12 13:11:36

解决方案2 1 2017-04-12 13:13:59

解决方案1
4 已采纳 2017-04-12 13:11:36

解决方案2
1 2017-04-12 13:13:59