时间戳

首页 > 解决方案 > ng-if 在异步调用期间显示两个元素

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

问题描述

使用：v1.3.15 我了解编码器试图通过为此使用两个选择菜单来完成什么。但是，由于在选择框中加载的数据是 api 调用的结果，因此存在延迟，因此两个选择菜单都会显示，直到检索到数据。

有没有办法在不使用两个选择菜单的情况下使用单个选择元素显示“搜索”消息选项，同时从后端获取数据（而 object.name 为 null ）？如果没有，我该如何做到这一点，以便在获取数据时只显示一个，而不是同时显示？

更新： 尝试使用默认值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 文件

控制器.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;
    })
  }

标签： javascriptangularjsng-optionsangular-ng-if

解决方案

我认为问题出在语句内部，请尝试以下方法：

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

推荐阅读