如何根据特定值显示 Angular 控制器数据

debugcn 发表于 Dev

B. 埃里克森

我试图根据特定值显示来自我的角度控制器的数据，在这种情况下是一周中的几天。这是我的控制器：

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 中，我将为一周中的每一天创建一个选项卡。我如何只显示控制器数据的日期和相应的星期几的选项卡？

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

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

哈迪

尝试使用这样的过滤器。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。