javascript - 选择值，然后只调用函数

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>

在 Controller 中:将发出 Action 移至新的作用域函数

  $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.
    };