Question

我有一系列项目对象，可以用3种方式排序：名称，日期和随机。

名称和日期排序分别按第一个字母或年份分组。随机排序没有任何分组，这意味着随机排序需要不同的DOM结构。

我已将它连接起来，但我在视图中使用了两个不同的DOM结构，这非常低效，可能不是＆＃34; Angular Way＆＃34;。我使用指令根据所选的排序选项显示或隐藏正确的DOM模板，但我希望有人可以就如何更好地解决这个问题提供一些指导。

更新：请注意ng-repeat有两种不同的用途，具体取决于所选的排序。 Name和Date使用嵌套循环遍历组（(header, group) in projects），然后每个组循环遍历其项目（project in group）。随机使用单个循环，因为随机未分组（project in projects）。

Plunkr。选择“随机”选项时请注意延迟。下面列出了一些相关部分。

项目网格部分

<div class="project-controls">
    <label><input type="radio" ng-model="orderChoice" value="name">Name</label>
    <label><input type="radio" ng-model="orderChoice" value="date">Date</label>
    <label><input type="radio" ng-model="orderChoice" value="random">Random</label>
</div>

<!-- DOM structure for grouped Name and Date sortings -->
<!-- Note the nested ng-repeat -->
<div id="nonRandomGrouping" ng-hide="randomSort">
    <div class="group" ng-repeat="(header, group) in projects">
        <h2>{{ header }}</h2>
        <ul class="project-thumbnails">
            <li ng-repeat="project in group | orderBy: 'name' ">
            <img ng-src="{{project.coverImage}}">
            <p><strong>{{ project.name }}</strong></p>
            <p><strong>{{ project.date }}</strong></p>
            </li>
        </ul>
    </div>
</div>

<!-- DOM structure for ungrouped Random sorting -->
<!-- Note the single ng-repeat -->
<div class="group" id="randomGrouping" ng-show="randomSort">
    <ul class="project-thumbnails">
        <li ng-repeat="project in projects" style="overflow: auto;">
            <img ng-src="{{project.coverImage}}">
            <p><strong>{{ project.name }}</strong></p>
            <p><strong>{{ project.date }}</strong></p>
        </li>
    </ul>
</div>

控制器

angular.module('myApp.controllers', [])
    .controller('MyCtrl1', ['$scope', '$http', function($scope, $http) {
        var projectsByName,
            projectsByYear,
            originalData

        $scope.orderChoice = "name"
        $scope.randomSort = false

        function randomize() {
            $scope.randomSort = true
            $scope.projects = originalData.sort(function() { return 0.5 - Math.random() })
        }

        $scope.getProjects = function() {
          $http({ method : "GET", url : "/projects.json" }).success(function(data) {
              $scope.count = data.length
              originalData = data.sort()
              $scope.projects = projectsByName = _.groupBy(data, function grouper(proj){
                return proj.name[0]
              })
              projectsByYear = _.groupBy(data, function grouper(proj){
                return new Date(proj.date).getFullYear()
              })
          })
        }

        $scope.$watch('orderChoice', function orderChangeHandler(newVal, oldVal){
            if ( newVal !== oldVal ) {
                switch(newVal){
                    case 'name':
                        $scope.randomSort = false
                        $scope.projects = projectsByName
                        break;
                    case 'date':
                        $scope.randomSort = false
                        $scope.projects = projectsByYear
                        break;
                    case 'random':
                        randomize()
                        break;
                }
            }
        })

        $scope.getProjects()
    }])

Answer 1

1.-你可以建模＆＃34;随机排序＆＃34; as＆＃34;单个分组＆＃34;而不是分组，以避免重复。

2.-而不是在观看时随机播放，你可以随机播放一次，然后记住结果。

与Angular Directives的清晰度

1 个答案: