Question

我将使用先前使用过的jsfillde。

正如您在点击过滤器（汤，肉等）时所看到的，过滤结果加载实时。我希望让用户进行选择，然后通过点击“更新”按钮触发结果（以便在移动设备上进行表演）

我很不确定如何在JavaScript中实现这一点，我很新...我正在使用Ionic，下面是调用过滤器函数的HTML片段。

 <ion-item ng-repeat="dish in dishList | selectedDishType:selection ">
        <article class="item_frame">
                <h1 class="item_name_english">{{dish.nameEnglish}}</h1>

                <h2 class="item_name_local_language">{{dish.nameLocal}}</h2>

            <p class="item_description ">{{dish.description}}</p>
        </article>
        <!--main article frame 1 -->
    </ion-item>

Answer 1

添加一个按钮：

    <div class="listing_venue_types_filter_page">
        <div class="input_dishtype_selection " data-ng-repeat="dishType in dishTypeList" ng-class="{'filter_selected':selection.indexOf($index) != -1}" ng-click="toggle($index)">{{dishType.name}}</div>
    </div>
    <button class="button" ng-click="updateDisplay()">Update</button>

并在控制器中：将emit动作移动到新的范围函数

  $scope.updateDisplay = function () {
     //calling an event to any listener with the latest selection data.
        $rootScope.$emit('dishType.selectionChanged', $scope.dishTypeList.filter(function (dType, idx) {
            return $scope.selection.indexOf(idx) != -1;
        }).map(function (dType) {
            return dType.name.toLowerCase();
        }));
        //calling an event to any listener with the latest selection data.
    };

选择值，然后只调用函数

1 个答案: