在AngularJS中的select控件（ng-options）中填充选项后，如何在下拉字段中反映当前值？
[英]How to reflect the current value in a drop-down field after populating options in a select control(ng-options) in AngularJS?
问题描述
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: 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 个解决方案
解决方案1
1 已采纳 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-model，您正在尝试将name分配为选项的唯一标识符，因此您可能要使用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. 这将确保使用正确的名称填充ng-model （ ng-model="main.currentStatus.name" ），并且将使用ng-model属性中设置的值预先选择下拉菜单。
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.statusesIndex = AngelloHelper.buildIndex(main.statuses, 'name'); ），然后执行以下操作：
main.currentStatus = {name: story.status};
or even set your ng-model as 甚至将您的ng-model设置为
<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;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.