Reputation: 1250
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
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"
}, ];
}]);
Here I am using moment
functions isAfter
, isSame
to compare dates.
Upvotes: 2