How to reflect the current value in a drop-down field after populating options in a select control(ng-options) in AngularJS?
Question
The discussion revolves around an application which can be visualized as,
As seen clearly, as the user clicks on one of the stories on the left hand side, the right-hand side fields are populated with the content corresponding to that story.
Every story has a title and a status ,
service:
myModule.service('AngelloModel', function(){
var service = this;
var stories = [
{
title: 'First story',
status: 'To Do',
},
{
title: 'Second story',
status: 'Back Log',
},
{
title: 'Another story',
status: 'Code Review',
}
];
var statuses = [
{name: 'Back Log'},
{name: 'To Do'},
{name: 'In Progress'},
{name: 'Code Review'},
{name: 'QA Review'},
{name: 'Verified'},
{name: 'Done'}
];
service.getStories = function(){
return stories;
}
service.getStatuses = function(){
return statuses;
}
})
factory( a helper/utility function):
myModule.factory('AngelloHelper', function() {
var buildIndex = function(array, property) {
var tempArray = [];
for (var i = 0; i < array.length; i++) {
tempArray[array[i][property]] = array[i];
}
return tempArray;
}
return {
buildIndex : buildIndex
}
})
controller and module:
var myModule = angular.module('Angello',[]);
myModule.controller('MainCtrl',function(AngelloModel, AngelloHelper){
var main = this;
main.stories = AngelloModel.getStories();
main.statuses = AngelloModel.getStatuses();
main.statusesIndex = AngelloHelper.buildIndex(main.statuses, 'name');
main.setCurrentStory = function(story){
main.currentStory = story;
//alert(story.status); // (To Do) if I click on first story
main.currentStatus = main.statusesIndex[story.status];
//alert(main.currentStatus); // {name: 'To Do'} if I click on first story
//alert(main.currentStatus.name); // hence it will be (To Do)
}
})
html:
<body>
<div ng-controller="MainCtrl as main">
<div class="col-md-4">
<h2>Stories</h2>
<div class="callout" ng-repeat="story in main.stories"
ng-click="main.setCurrentStory(story)">
<h4>{{story.title}}</h4>
<p>{{story.description}}</p>
</div>
</div>
<div class="col-md-6 content">
<h2>Story</h2>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label" for="inputTitle">Title</label>
<div class="controls">
<input type="text" class="form-control"
id="inputTitle" placeholder="Title" ng-model="main.currentStory.title" />
</div>
</div>
<div class="form-group">
<div class="controls">
<select id="inputStatus" class="form-control"
ng-model="main.currentStatus.name"
ng-options="l.name for l in main.statuses"></select>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
Consider this one which is the whole point of discussion :
<select id="inputStatus" class="form-control"
ng-model="main.currentStatus.name"
ng-options="l.name for l in main.statuses"></select>
In the figure at the top, you can see the values in the drop-down field, which is done by
ng-options="l.name for l in main.statuses"
However, the current value is not reflected on selecting a story, even though I have done,
ng-model="main.currentStatus.name"
Any suggestions?
1 answers
solution1
1 ACCPTED 2015-09-13 14:52:14
Looking at the ng-model you are trying to assign name as the unique identifier for options, so you may want to use select as ie
ng-options="l.name as l.name for l in main.statuses"
This will make sure the ng-model ( ng-model="main.currentStatus.name" ) is populated with the right name and your dropdown will be preselected with the value set in the ng-model property.
However if you are setting an object with array of objects as this with just one property you might as well set a unique identifier (if name is not one) or just use array of names.
Also with this you can removing the mapping logic ( main.statusesIndex = AngelloHelper.buildIndex(main.statuses, 'name'); ) and just do:
main.currentStatus = {name: story.status};
or even set your ng-model as
<select id="inputStatus" class="form-control"
ng-model="main.currentStatus"
ng-options="l.name as l.name for l in main.statuses">
</select>
and
main.currentStatus = story.status;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.