javascript - 如何根据特定值显示 Angular Controller 数据

Question

我试图根据特定值(在本例中为一周中的几天)显示来自 Angular Controller 的数据。这是我的 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;
});

现在，在我的 HTML 中，我将有一个代表一周中每一天的选项卡。如何仅显示 Controller 数据的日期以及星期几的相应选项卡？

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

所以我最终想要的是，当我单击“星期一”选项卡时，我只想要具有星期一日期值的 Controller 数据等。提前感谢您的帮助!

Answer 1

尝试使用这样的过滤器。

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>