Query: I have a scenario where I need to set the default option in an angular dropdown menu based on values from an array of Person objects. How can I achieve this when initially loading the UI?
http://plnkr.co/edit/hvIimscowGvO6Hje35RB?p=preview
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<button ng-click="loadData()">Load Data</button>
<ul ng-repeat="person in model.persons" >
<li>name: {{person.name}}
<select ng-select
ng-options="item.name for item in data"
ng-change="updateName(selectedName)"
ng-model="selectedName">
</select>
</li>
<li>age : {{person.age}}</li>
<li>sex : {{person.sex}}</li>
</ul>
<script>
var app=angular.module("app",[]);
app.controller("test",function($scope){
$scope.model={};
$scope.model.persons=[];
$scope.updateName=function(item){
this.person.name = item.name;
}
$scope.data=[{name:'bob'},{name:'Sal'},{name:'Lee'},{name:"Fred"}];
$scope.loadData=function(){
$scope.model.persons=[{name:'bob',age:24,sex:'Yes Please'},
{name:'Sal',age:29,sex:'Not Today'},
{name:'Lee',age:34,sex:'If I must'}];
}
});
angular.bootstrap(document,["app"]);
</script>