我正在使用 AngularJS，当选择记录进行编辑并将其加载到表单时，我需要设置下拉列表控件的选定选项。如果用户想要选择不同的值，下拉列表中仍应包含其他可用值。
当没有选择记录时，如果用户想要创建新记录，表单应该仍然具有可用的值列表。
下面是我的表单首次加载时的屏幕截图。您可以在屏幕截图中看到“仪器”下拉列表显示所有可用的仪器。该列表是通过表单加载时调用的 Web 服务加载的。
它将所有内容放入一个名为:$scope.instruments 的数组中
代码:
//Get Instruments
$http.get('/api/Instrument/GetAllInstruments').success(function (data, status, headers, config) {
$scope.instruments = data;
}).error(function (data, status, headers, config) {
$scope.error = "An error has occurred while fetching Instruments." + data;
});
在表单下方，有一个包含所有记录的网格:
当用户单击编辑图标时，记录将加载到表单上:
该记录具有乐器、风格和评分的值，但我不知道如何使用记录中的这些值来设置下拉列表中的选定值。
这是我用来加载所选记录并分配乐器 id、风格 id、评分 id 的代码。不是最优雅的代码，但这是我所能得到的:
//Edit Store Page
$scope.edit = function () {
if (this.page.SPPreambleID === null || this.page.SPPreambleID === 0)
{
this.page.SPPreambleID = -1;
}
$http.get('/api/StorePage/GetStorePage?StorePageID=' + this.page.StorePageID + '&SPPreambleID=' + this.page.SPPreambleID).success(function (data) {
$scope.updateShow = true;
$scope.addShow = false;
$scope.newpage = data;
angular.forEach($scope.newpage.SPAttributeRefID, function (attribute, index) {
if (attribute == 1) {
$scope.recordInstrument = $scope.newpage.AttributeID[0];
}
if (attribute == 2) {
$scope.recordStyle = $scope.newpage.AttributeID[1];
}
if (attribute == 3) {
$scope.recordScoring = $scope.newpage.AttributeID[2];
}
});
}).error(function () {
$scope.error = "An Error has occured while Editing this Store Page!" + data;
});
}
这是下拉菜单的 HTML:
@* Instrument *@
<div class="form-group">
<div class="col-sm-10 space">
<select class="form-control" name="instrumentfilter" data-ng-model="instrumentfilter" required
data-ng-options="i.ID as i.Description for i in instruments track by i.ID" data-ng-change="">
<option value="">-- Choose a Style --</option>
</select>
</div>
</div>
@* Style *@
<div class="form-group">
<div class="col-sm-10 space">
<select class="form-control" name="stylefilter" data-ng-model="stylefilter" required
data-ng-options="st.ID as st.Description for st in styles track by st.ID" data-ng-change="">
<option value="">-- Choose a Style --</option>
</select>
</div>
</div>
@* Scoring *@
<div class="form-group">
<div class="col-sm-10 space">
<select class="form-control" name="scoringfilter" data-ng-model="scoringfilter" required
data-ng-options="sc.ID as sc.Description for sc in scorings track by sc.ID">
<option value="">-- Choose a Scoring --</option>
</select>
</div>
</div>
如果我能在这个论坛中获得任何帮助，那就太好了。我一整天都在为此苦苦挣扎，我确信它应该不会太复杂。
更新
这是建议修改 data-ng-model 以使用范围变量 recordInstrument、recordStyle 和 recordScoring 后更新的 HTML。
@* Instrument *@
<div class="form-group">
<div class="col-sm-10 space">
<select class="form-control" name="instrumentfilter" data-ng-model="recordInstrument" required
data-ng-options="i.ID as i.Description for i in instruments track by i.ID" data-ng-change="">
<option value="">-- Choose a Style --</option>
</select>
</div>
</div>
@* Style *@
<div class="form-group">
<div class="col-sm-10 space">
<select class="form-control" name="stylefilter" data-ng-model="recordStyle" required
data-ng-options="st.ID as st.Description for st in styles track by st.ID" data-ng-change="">
<option value="">-- Choose a Style --</option>
</select>
</div>
</div>
最佳答案
假设JS代码
angular.forEach($scope.newpage.SPAttributeRefID, function (attribute, index) {
if (attribute == 1) {
$scope.recordInstrument = getRecordInstrument($scope.newpage.AttributeID[0]);
}
if (attribute == 2) {
$scope.recordStyle = getRecordStyle($scope.newpage.AttributeID[1]);
}
if (attribute == 3) {
$scope.recordScoring = getRecordScoring($scope.newpage.AttributeID[2]);
}
});
获取正确的ID，有3个函数getRecordInstrument、getRecordStyle和getRecordScoring来获取instrument、< em>样式或通过ID评分对象，尝试通过ngModel指令将这些ID分配给选择:
@* Style *@
<div class="form-group">
<div class="col-sm-10 space">
<select class="form-control" name="instrumentfilter" data-ng-model="recordInstrument" required
data-ng-options="i.ID as i.Description for i in instruments track by i.ID">
<option value="">-- Choose a Style --</option>
</select>
</div>
</div>
@* Style *@
<div class="form-group">
<div class="col-sm-10 space">
<select class="form-control" name="stylefilter" data-ng-model="recordStyle" required
data-ng-options="st.ID as st.Description for st in styles track by st.ID">
<option value="">-- Choose a Style --</option>
</select>
</div>
</div>
@* Scoring *@
<div class="form-group">
<div class="col-sm-10 space">
<select class="form-control" name="scoringfilter" data-ng-model="recordScoring" required
data-ng-options="sc.ID as sc.Description for sc in scorings track by sc.ID">
<option value="">-- Choose a Scoring --</option>
</select>
</div>
</div>
关于javascript - 从选定的记录设置下拉列表的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39926361/