使用:v1.3.15 我了解编码人员为此使用两个选择菜单要完成的工作。但是,由于加载到选择框中的数据是api调用的结果,因此存在延迟,因此两个选择菜单都将显示,直到检索到数据为止。
有一种方法可以在从后端获取数据时使用单 select元素显示“搜索”消息选项(
更新:
尝试在ng-option
中使用默认值(无效,不确定如何解决)
<p class="input-group" flex>
<label for="obj-name" class="input-group__label">Name
</label>
<select
ng-if="object.names !== null"
id="obj-name"
type="text"
class="input-group__input"
placeholder=""
ng-model="response.object.id"
ng-options="object.id as object.name for object in object.names"
ng-change="object.saveName()">
<option value="" disabled>
{{fetching?'Searching...':'Select...'}}
</option>
</select>
<!-- <select ng-if="object.name === null" type="text" class="input-group__input" disabled="true">
<option selected>Searching...</option>
</select> -->
更新UPDATE 以包含JS文件
Controller.js
$scope.fetching = true;
$q.when($scope.modification)
.then((modification) => {
$selectEl.getObjectOptions(object.id, object.status)
.then((results) => {
results.unshift({ id: null, name: ' '});
this.optionsData = results;
}).then(() => {
$scope.fetching = false;
});
});
selectEl.service.js
export class SelectEl {
constructor ($q, $http) {
this._$q = $q;
this._$http = $http;
}
getObjectOptions(objId, status) {
let params = {
obj_id: objId,
status_id: status
};
return this._$http.get(url, { params: params })
.then((result) => {
return result.data;
})
}
答案 0 :(得分:0)
我认为问题出在语句内,请尝试以下方法:
<p class="input-group" flex>
<label for="obj-name" class="input-group__label">Name
</label>
<select
ng-if="object && object.name"
id="obj-name"
type="text"
class="input-group__input"
placeholder="Select..."
ng-model="object"
ng-options="object.id as object.name for object in objects || 'Searching...'"
ng-change="object.saveName()">
</select>
<select ng-if="!object || !object.name" type="text" class="input-group__input" disabled="true">
<option selected>Searching...</option>
</select>
</p>