Question

我试图将它与当前视图范围一起使用，也可以添加自己的控制器。在取消按钮单击时清除所有字段没有成功。我只需要清除这些字段。

这是我的控制器模式：

var myApp = angular.module('starter.controllers');

function TalkSearchPageCtrl($scope, TalkSearch, $ionicModal) {
var nextPageNum = 1;
$scope.noMoreItemsAvailable = false;
var nextPageNum = 1;
$scope.loadMore = function() {
    TalkSearch.getList(nextPageNum, {

    }, $scope.idsToExclude, $scope.backResult).success(function(items) {
        if (typeof(items.idsToExclude) !== undefined) {
            $scope.idsToExclude = items.idsToExclude;
            $scope.backResult = true;
        } else {
            $scope.idsToExclude = undefined;
            $scope.backResult = undefined;
        }
        // error check when it's not loading
        if (items.talks.length != 0) {
            i = 0;
            while (i != items.talks.length - 1) {
                $scope.talks.push(items.talks[i]);
                i++;
            }
            nextPageNum++;
        } else {
            $scope.noMoreItemsAvailable = true;
        }

        $scope.$broadcast('scroll.infiniteScrollComplete');
    });


};

$scope.talks = [];

$scope.categories = [
];

$scope.checkedCategories = [];


$scope.toggleCheck = function(category) {
    if ($scope.checkedCategories.indexOf(category) === -1) {
        $scope.checkedCategories.push(category);
    } else {
          $scope.checkedCategories.splice($scope.checkedCategories.indexOf(category), 1);
    }
};
$scope.getValues = function(filter) {
    console.log(filter);
    if (filter.length || filter !== undefined) {
        $scope.userFilter = {};
        $scope.userFilter.categories = [];
        $scope.userFilter.filters = {};
        $scope.userFilter.filters = angular.copy(filter);
        var categories = $scope.checkedCategories;
        $scope.userFilter.categories = categories;
        getFiltersService.filter = angular.copy(filter);
        console.log($scope.userFilter);
        // console.log(getFiltersService.filter);
    }
};

$scope.reset = function() {
    console.log($scope.userFilter);
    // $scope.modal.hide();
    // $scope.userFilter.filters = null;
    // $scope.userFilter.categories = null;
    // $scope.userFilter = {};
    console.log($scope.userFilter);
};

$ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
}).then(function(modal) {
    $scope.modal = modal;
});

} myApp.controller（'TalkSearchPageCtrl'，['$ scope'，'TalkSearch'，'$ ionicModal'，TalkSearchPageCtrl]）;

$ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
}).then(function(modal) {
    $scope.modal = modal;
});

这是我的html脚本模板：

<script id="my-modal.html" type="text/ng-template">
<ion-modal-view>
    <ion-header-bar class="bar bar-header schoolinkscolor headerSection" ng-controller="TalkFilterPageCtrl">
        <div class="row padding0">
            <div class="col">
                <div class="button button-white closeModal" side="right" ng-click="reset(talkfilter);hideButton=false;showDetails=false;"><span>Cancel</span></div>
            </div>
            <div class="col">
                <div class="light headerTitle"><span class="light">Schoo</span><span class="color-black">Links</span></div>
            </div>
            <div class="col">
                <div class="button button-white searchButton" side="left"><span>Search</span></div>
            </div>
        </div>
    </ion-header-bar>
    <ion-content class="has-header">
        <div class="talkFilterContainer">
            <section>
                <div class="col padding0">
                    <div class="list list-inset">
                        <label class="item item-input">
                            <i class="icon ion-search placeholder-icon"></i>
                            <input type="text" placeholder="Search" ng-model="talkfilter.searchTalk" ng-change="getValues(talkfilter)" ng-model-options="{ debounce: 1000 }">
                        </label>
                    </div>
                </div>
            </section>
            <div class="row padding clearboth"></div>
            <section>
                <div class="list padding">
                    <label class="item item-input item-select">
                        <div class="input-label">
                            Language:
                        </div>
                        <select ng-options="author for author in ['Mandarin','Spanish','Portuguese']" ng-model="talkfilter.selectLanguage" ng-init="author = 'Select Preferred Language'" ng-change="getValues(talkfilter)">
                            <option value="">Select Preferred Language</option>
                        </select>
                    </label>
                </div>
            </section>
            <div class="row padding clearboth"></div>
            <section>
                <div class="list padding">
                    <label class="item item-input item-select">
                        <div class="input-label">
                            Author Type:
                        </div>
                        <select ng-options="author for author in ['Consultant','School','Student']" ng-model="talkfilter.authorType" ng-init="author = 'Select By Author Type'" ng-change="getValues(talkfilter)">
                            <option value="">Select By Author Type</option>
                        </select>
                    </label>
                </div>
            </section>
            <div class="row padding clearboth"></div>
            <section class="padding">
                <ion-list>
                    <ion-item ng-repeat="category in categories track by $index" ng-class="{ 'hidden': ! showDetails  && $index > 2}">
                        <ion-checkbox value="{{category}}" ng-model="$index" ng-click="toggleCheck(category); getValues(talkfilter)">{{category}}</ion-checkbox>
                    </ion-item>
                </ion-list>
                <div class="row">
                    <button class="button button-full button-clear" ng-click="showDetails = ! showDetails;hideButton=true" ng-show="!hideButton">See All Categories</button>
                </div>
            </section>
        </div>
    </ion-content>
</ion-modal-view>

这是我的重置功能：

var Talk = this;
Talk.reset = function(filter) {
    console.log(filter);
    filter = null;
};

还试用了$ scope：

$scope.reset = function(filter) {
    console.log(filter);
    filter = null;
};

***更新：

$scope.reset = function(filter) {
     $scope.userFilter = null; //does not work. none of these variations work.
     $scope.userFilter = '';
};

这两种方法都返回undefined。但是，如果我将按钮放在身体中，它会清除字段。我需要标题中的按钮。

还尝试使用以下内容重新设置重置：

<button ng-click="talkfilter=null"></button>

Answer 1

问题是你没有通过ng-click传递过滤器函数中的任何内容，因为你的$ scope.userfilter没有在整个控制器中定义。

添加$ scope.userFilter = {}就像你在getValues中完成的那样，如果你执行你的重置函数，那么在该函数之外应该给你想要的结果....

function TalkSearchPageCtrl($scope, TalkSearch, $ionicModal) {
$scope.userFilter = {};

...

$scope.reset = function(filter) {
    console.log(filter); \\Make sure this is the object
    $scope.userFilter = null; \\Set it to null or {}
}`

离子模态：清除点击/取消的所有字段

1 个答案: