How to show Angular controller data based on specific value

Question

I'm trying to show the data from my angular controller based on a specific value, which in this case is the days of the week. Here is my controller:

app.controller("ExerciseCtrl", function($scope){
    var exercise_arr = [
        {
            name: "Bicep Curl",
            weight: 30,
            day: "Monday"
        },
        {
            name: "Bench Press",
            weight: 140,
            day: "Tuesday"
        },
        {
            name: "Squats",
            weight: 140,
            day: "Thursday"
        }
    ];

    $scope.exercises = exercise_arr;
});

Now in my HTML, I will have a tab for each day of the week. How do I go about only showing the controller data's day with the corresponding tab for the day of the week?

<ul class="nav nav-pills">
    <li><a href="#">Sunday</a></li>
    <li><a href="#">Monday</a></li>
    <li><a href="#">Tuesday</a></li>
    <li><a href="#">Wednesday</a></li>
    <li><a href="#">Thursday</a></li>
    <li><a href="#">Friday</a></li>
    <li><a href="#">Saturday</a></li>
</ul>

<div ng-controller="ExerciseCtrl">
    <ul ng-repeat="exercise in exercises">
        <li>
            {{exercise}}
        </li>
    </ul>
</div>

So what I want in the end is that when I click on the Monday tab, I only want the controller data that has the day value of Monday, etc. Thanks in advance for the help!

Could you please share your code where you got stuck while working on this logic? — palaѕн
– palaѕн, Commented May 30, 2017 at 14:26
I kinda miss working with angular, if you can wrap the <ul> in the controller you can do something like this — George
– George, Commented May 30, 2017 at 14:34

Hadi · Accepted Answer · 2017-05-30 14:34:48Z

Try use filter like this.

var app = angular.module('anApp', []);
app.controller('ctrl', function($scope) {
  var exercise_arr = [
        {
            name: "Bicep Curl",
            weight: 30,
            day: "Monday"
        },
        {
            name: "Bench Press",
            weight: 140,
            day: "Tuesday"
        },
        {
            name: "Squats",
            weight: 140,
            day: "Thursday"
        }
    ];

    $scope.exercises = exercise_arr;
    $scope.setFilter = function(filter){
      $scope.filterDay = filter;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<div ng-app="anApp" ng-controller="ctrl">
<ul class="nav nav-pills">
    <li ng-repeat="item in exercises"><a href="#" ng-click="setFilter(item.day)">{{item.day}}</a></li>
</ul>

<div >
    <ul ng-repeat="exercise in exercises | filter:{day:filterDay}">
        <li>
            {{exercise.name}}
        </li>
    </ul>
</div>

</div>

Collectives™ on Stack Overflow

How to show Angular controller data based on specific value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related