ng-if showing both elements during asynchronous call [duplicate]

问题

Using: v1.3.15 I 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.

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?

Update: Try to use a default value in ng-option (doesn't work, not sure how to fix)

<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 UPDATE to include JS files

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;
    })
  }

回答1:

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>

来源：https://stackoverflow.com/questions/55423562/ng-if-showing-both-elements-during-asynchronous-call

标签

javascript

angularjs

ng-options

angular-ng-if