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

Question

我正在尝试通过按按钮 show/hide 个元素。

    <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>

在视图中我有一个等于 dateFilter 的 ng-show:

    <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)
    }

但是当我按下"upcoming events"或"Today events"的按钮时，它总是错误的并且显示none个事件。显示所有事件的按钮效果很好。按下任何按钮之前的默认行为是 "false"，因此会显示 none 个事件。

我试过：

    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

在您的按钮中，您传递的是 event，即 undefined，因为按钮不在 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 来比较日期。

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

ng-show selecting different true-false methods with buttons

angularjs

ng-show