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=".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?
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./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?
Share Improve this question asked Apr 12, 2017 at 13:07 AdzAdz 2,84712 gold badges45 silver badges62 bronze badges 1- your missing the testObject.addresses on html binding – LiverpoolOwen Commented Apr 12, 2017 at 13:10
2 Answers
Reset to default 5You 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./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>Check this one:
<select ng-model="selectedItem"
ng-options="selectedItem as selectedItem.address
for selectedItem in testObject.addresses">
</select>
You can also set default selectedItem as 1st item in list
$scope.selectedItem = $scope.testObject.addresses[0];
Demo
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745534073a4631826.html
评论列表（0条）