This conversation centers around an app that can be visualized as,
https://i.stack.imgur.com/Y1Nvv.png
When a user clicks on one of the stories on the left side, the corresponding content is displayed on the right-hand side.
Each story includes 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;
main.currentStatus = main.statusesIndex[story.status];
}
})
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>
The key 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 image above, the dropdown values are generated by using
ng-options="l.name for l in main.statuses"
However, the current value does not update when selecting a story, despite including,
ng-model="main.currentStatus.name"
Any recommendations?