CODEWITHSUNDEEP
angularjsng-show
Alex
Alex

Reputation: 1250

ng-show selecting different true-false methods with buttons

I'm trying to show/hide elements by pressing buttons.

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

In the view I have an ng-show that is equal to dateFilter:

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

and I have the logic in the app.js

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

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

But when I press the button of "upcoming events" or "Today events", it is always false and none of the events are shown. The button to show all the events works perfectly. The default behavior before pressing any button is "false", so none of the events are shown.

I tried to do: 

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

but it is always true and shows all the events.

Why is not working? where can I put "computeShow(event.date)" as default?

Edit: I tried to add

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

to have a default behavior but this is always "true" and I also tried

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

and this one is always false

I add a fiddle with what I am trying to do: https://jsfiddle.net/28f4edv3/6/

Upvotes: 2

Views: 418

Answers (1)

Vivek
Vivek

Reputation: 13298

In your buttons, you are passing event which is undefined, since the buttons are not in the scope of ng-repeat. I have modified the logic. It will work the way you want it to.

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>

Script

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

Here I am using moment functions isAfter, isSame to compare dates.

Upvotes: 2

Related Questions