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

时间:2019-03-29 18:28:04

标签: javascript angularjs ng-options angular-ng-if

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

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

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

1 个答案:

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