0

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;
    })
  }
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Chris22
  • 1,973
  • 8
  • 37
  • 55
  • 1
    Please include the version of Angular, as `ng-if` has changed over the years. – Steven Stark Mar 29 '19 at 18:28
  • 2
    Have you tried giving a default value to object property (name)? I think initially its value is undefined so it doesn't match with any of the conditions – Luis Barajas Mar 29 '19 at 18:31
  • @StevenStark had to research it... updated question. – Chris22 Mar 29 '19 at 18:32
  • @LuisBarajas that's a good idea, I do remember reading about something like that recently, but I haven't tried it. I'll have to google to see the correct syntax for using that in the ng-if statement. – Chris22 Mar 29 '19 at 18:34
  • @LuisBarajas **Added update**. If you mean to set a default value for an option, I tried to set a default value option: _('Searching....")_ in the select menu to display while the data was being fetched, but I'm having trouble with the syntax because I can't get it to work. Maybe that's why the initial coder used two select elements -- trying to set `ng-options` attribute. Do you or anyone have any suggestion on the correct way to write this? – Chris22 Mar 29 '19 at 18:57
  • You can try to define new scope variable $scope.isSearching, and set it to true while your data is loading. Then set your ng-if="isSearching". Finally, when your data is loaded, you can set the $scope.isSearching=false; – Caner Akdeniz Mar 29 '19 at 19:55

1 Answers1

0

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>
Luis Barajas
  • 478
  • 3
  • 12
  • Your answer probably works if I had given you better syntax. After trying to follow it, I see that I wasn't using the correct data structure for the `ng-model` in my example. So I wasn't sure that in your `ng-if` statements which `object` you were using, the `ng-model` or the iterator in the `for...in` loop, so I couldn't get it to work. Would you please revise your answer? – Chris22 Mar 29 '19 at 19:58