ng-if在异步调用期间显示两个元素

问题描述

使用:v1.3.15我了解编码人员为此使用两个选择菜单要完成的工作.但是，由于加载到选择框中的数据是api调用的结果，因此存在延迟，因此这两个选择菜单都一直显示，直到检索到数据为止.

Using: v1.3.15I understand what the coder was trying to accomplish by using two select menus for this. However, because the data being loaded in the select box is the result of an api call, there is a delay, so both select menus are displaying until the data has been retrieved.

是否有一种方法可以在从后端获取数据时使用单个 select元素来显示搜索"消息选项(而object.name为null )而不使用两个选择菜单?如果不是，我该怎么做，以便在获取数据时仅显示一个，而不显示两个?

Is there a way to show the "searching" message option using a single select element while the data is being fetched from the backend (while the object.name is null) without using two select menus? If not, how can I do this so that only one will show, not both while the data is being fetched?

更新:尝试在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;
    })
  }

推荐答案

我认为问题出在语句内，请尝试以下操作:

I think the problem is inside the statement, try this instead:

<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>

这篇关于ng-if在异步调用期间显示两个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！