I have this object format
{
first_name : "Bob",
last_name : "Smith",
addresses : [
{address:"1 Baker Street",
city: "london"
},
{address:"2 Baker Street",
city: "london"
}
]
}
I want to set the address bits in the select dropdown i.e. "1 Baker Street", "2 Baker Street",
This is my code
<!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>
I'm struggling to get my head around how to loop through the objects with AngularJS. Any help?
You have to call the child object of array and the property. Take a look this code.
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>