angularjs - ng-show 使用按钮选择不同的真假方法

Question

我正在尝试通过按按钮来显示/隐藏元素。

    <a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="dateFilter = computeShow(event.date)">Upcoming Events</a>
    <a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="dateFilter = computeToday(event.date)">Today Events</a>
    <a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="dateFilter = true">All the events</a>

在 View 中，我有一个 ng-show 等于 dateFilter:

    <section ng-repeat="event in events" ng-show="dateFilter">

我在 app.js 中有逻辑

    $scope.computeShow = function(date){
      return (moment().format() <= date);
    }

    $scope.computeToday = function(date){
      return (moment().format() == date)
    }

但是当我按下“即将发生的事件”或“今日事件”按钮时，它总是错误的并且没有显示任何事件。显示所有事件的按钮运行良好。按下任何按钮之前的默认行为是“false”，因此不会显示任何事件。

我尝试这样做:

    ng-click="dateFilter = 'computeShow(event.date)'"
    ng-click="dateFilter = 'computeToday(event.date)'"

但它始终为真并显示所有事件。

为什么不工作？我可以在哪里将“computeShow(event.date)”设置为默认值？

编辑:我尝试添加

    $scope.dateFilter = 'computeShow(event.date)';

有一个默认行为，但这始终是“true”，我也尝试过

    $scope.dateFilter = computeShow(event.date);

这个总是错误的

我添加了一个关于我想做的事情的 fiddle :https://jsfiddle.net/28f4edv3/6/

Answer 1

在按钮中，您传递的事件是未定义的，因为按钮不在ng-repeat的范围内。我修改了逻辑。它会按照您想要的方式工作。

HTML

<div ng-app="app">
    <div ng-controller="MainController"> 
        <a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="showEvents = 'upcomming'">Upcoming Events</a> <br> 
        <a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="showEvents = 'today'">Today Events</a> <br> 
        <a id="filter-by-date" class="btn btn-success wide-btn" href="#" ng-click="showEvents = 'all'">All the events</a> <br><br>

        <section ng-repeat="event in events" ng-show="computeShow(event, showEvents)">{{event.title}}</section>
    </div>
</div>

脚本

angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {

    $scope.dateFilter = 'computeShow(event.date)';

    $scope.computeShow = function (event, showEvents) {
        if (showEvents === 'upcomming' && moment(event.date).isAfter(moment())) {
            return true;
        } else if (showEvents === 'today' && moment().isSame(event.date, 'day')) {
            return true;
        } else if (showEvents === 'all') {
            return true;
        }

        return false;
    }

    $scope.events = [{
        title: "hello",
        date: "2015-11-29"
    }, {
        title: "awesome event",
        date: "2015-12-1"
    }, {
        title: "another event",
        date: "2015-10-31"
    }, {
        title: "fancy event",
        date: "2015-12-2"
    }, {
        title: "today event",
        date: "2015-12-1"
    }, ];

}]);

<强> See the Fiddle Here

这里我使用 moment 函数 isAfter、isSame 来比较日期。