Question

我的主视图中有一个搜索栏和最后查看的列表，我想要做的是在用户开始在搜索栏中输入时隐藏上次查看的列表，并在搜索栏为空时取消隐藏。使用我正在使用的当前代码，它首先显示上次查看的列表，并在用户开始键入时隐藏，但是当清除搜索框时，它永远不会被取消隐藏。

我已经确定，当用户清除搜索框时，查询不再等于{}，这会导致ng-if显示上次查看的列表，但它等于{$：＆＃34;＆＃34;}导致ng-if隐藏它。

<ion-view view-title="Office Finder">
<!-- Favourites button -->
    <ion-nav-buttons side="right">
        <button class="button icon ion-android-star" ui-sref="Favourites">
        </button>
    </ion-nav-buttons>
    <!-- Search function starts here -->
    <ion-header-bar class="bar-subheader">
        <label class="item item-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="search" id="search-criteria" placeholder="City, Country or Office Name" ng-model="query[queryBy]">
        </label>
    </ion-header-bar>
    <!-- Search function ends here -->


    <ion-content has-subheader>
        <!-- Main content starts here -->
        <!-- ng-show hides the list of offices and displays them when the user starts searching  -->
        <ion-list ng-if="query[queryBy]">
        <!-- Creates each item through collection-repeat and is filtered by the query linked to the search field -->
        <!-- ng-click opens the modal that will have the enlarged office address and the map of the office -->
            <ion-item class="item-text-wrap item-icon-right" id="output" collection-repeat="office in offices|filter:query[queryBy]" ng-controller="ModalCtrl" ng-click="openModal(office.Lat, office.Long); lastview(office.id);">
                <!-- Outputs all the data from offices.json -->
                <h3 id="LocName">{{office.LocationName}}</h3>
                <!-- the span prevents null data from being output causing empty space to be displayed -->
                <p id="details"><span ng-if="office.LocAddressLine1">{{office.LocAddressLine1}}</span><span ng-if="office.LocAddressLine2">, {{office.LocAddressLine2}}</span><span ng-if="office.LocCity">, {{office.LocCity}}</span><span ng-if="office.LocCountryDescription">, {{office.LocCountryDescription}}</span><span ng-if="office.LocZipPostalCode">, {{office.LocZipPostalCode}}</span></p>

                <!-- Creates the favourite icon on each list item, when the star is clicked the togglefav function is run -->
                <i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
            </ion-item>
    </ion-list>


    <ion-list id="cont">
        <!-- Last view offices list -->
        <div ng-if="!query[queryBy]">
                <h3 class="title" id="text">Last Viewed</h3>
            <!-- the filter with this collection repeat runs the function ifinfav2 which only displays items in the localstorage -->
                <ion-item id="fav" class="item-text-wrap item-icon-right" ng-repeat="office in offices|filter:ifinfav2" ng-controller="ModalCtrl" ng-click="openModal(office.Lat, office.Long);">
                <h3>{{office.LocationName}}</h3>
                <p id="details"><span ng-if="office.LocAddressLine1">{{office.LocAddressLine1}}</span><span ng-if="office.LocAddressLine2">, {{office.LocAddressLine2}}</span><span ng-if="office.LocCity">, {{office.LocCity}}</span><span ng-if="office.LocCountryDescription">, {{office.LocCountryDescription}}</span><span ng-if="office.LocZipPostalCode">, {{office.LocZipPostalCode}}</span></p>
                <i ng-class="{'icon ion-android-star': favicon(office.id), 'icon ion-android-star-outline': !favicon(office.id)}" ng-click="togglefav(office.id); $event.stopPropagation();"></i>
                </ion-item>
        </div>
        </ion-list>
</ion-content>
</ion-view>

我正在使用的查询创建一个对象，然后使用该对象搜索数组中的所有内容。

  $scope.query = {};
  $scope.queryBy = '$';

Answer 1

您需要更改为：

ng-if="query[queryBy] != ''"

使用ng-if显示和隐藏元素

1 个答案: