Question

我在角度范围内有艺术家信息，并使用ng-repeat重复列出模板中的所有艺术家信息。我正在尝试使用list.js对数据进行排序（名称，标题，标签，视图）。我使用bower安装了list.js，并在html模板<script src="/static/vendors/list.js/dist/list.min.js"></script>.

中提到了源代码

我正在尝试复制这个codepen但是有角度。

我知道角度排序！

问题： 排序和查看更改似乎无法正常工作

<div id="artists">
    <input class="search" placeholder="Search" />
    <button class="sort" data-sort="artist-name">Sort by name </button>
    <button class="sort" data-sort="album-title">Sort by Project </button>
    <button class="sort" data-sort="record-label">Sort by Label </button>
    <button class="sort" id="viewSwitch"> Change View   </button>


  <ul class="list" id="list">
    <li  ng-repeat="item in artists >
      <img src="http://placehold.it/120x120" alt="#" />
      <h3 class="artist-name">{{item.artist-name}}</h3>
      <p class="album-title">{{item.artist-title}}</p>
      <p class="record-label">{{item.record-label}}</p>
    </li>   </ul> </div>

<script> var options = {   valueNames: [ 'artist-name', 'artist-title', 'record-label' ] };

var artistList = new List('artists', options);

// View Switcher

$('#viewSwitch').on('click',function(e) {
    if ($('ul').hasClass('grid')) {
        $('ul').removeClass('grid').addClass('list');
    }
    else if($('ul').hasClass('list')) {
        $('ul').removeClass('list').addClass('grid');
    } }); </script>

Answer 1

＆＃13;

angular.module("stack", [])
    .controller("move", function($scope) {
        var count = 0;
        var count1 = 0;
        var details = document.getElementsByClassName('details');
        $scope.friends = [{ name: 'John', phone: '555-1212', age: 10 },
            { name: 'Mary', phone: '555-9876', age: 19 },
            { name: 'Mike', phone: '555-4321', age: 21 },
            { name: 'Adam', phone: '555-5678', age: 35 },
            { name: 'Julie', phone: '555-8765', age: 29 }
        ];
        $scope.sort = '-age';
        $scope.change = function() {
            count++;
            if (count % 2 !== 0) {
                $scope.sort = 'age';
            } else {
                $scope.sort = '-age';
            }
        }

        $scope.changeView = function() {
            count1++;
            if (count1 % 2 !== 0) {
                for (var i = 0; i < details.length; i++) {
                    details[i].style.width = 10 + '%';
                    details[i].style.display = 'inline-block';
                }

            } else {
                for (var i = 0; i < details.length; i++) {
                    details[i].style.width = 10 + '%';
                    details[i].style.display = 'block';
                }
            }
        }
    });

＆＃13;

<!DOCTYPE html>
<html ng-app="stack">

<head>
    <title>stack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
</head>

<body ng-controller="move">
    <div ng-repeat="friend in friends | orderBy:sort" class="details">
        <h3>{{friend.name}}</h3>
        <p>{{friend.phone}}</p>
        <p>{{friend.age}}</p>
    </div>
    <button ng-click="change()">sort by age</button>
    <button ng-click="changeView()">change view</button>
    <script type="text/javascript" src="controller.js"></script>
</body>

</html>

＆＃13;

我已经添加了排序和更改视图的基本代码。你需要整个解决方案吗？

Answer 2

list.js需要在angular返回你的最后数据后运行。所以在你的ng-repeat中这样做。他会检查最后一个项目的呈现时间

＆＃13;

ng-init="$last ? doFilter() : angular.noop()"

＆＃13;

现在您需要将过滤器功能添加到您的代码中，如此

＆＃13;

$scope.doFilter = function () {
            var options = {   valueNames: [ 'artist-name', 'artist-title', 'record-label' ] };
var artistList = new List('artists', options);
        };

＆＃13;

list.js排序和视图更改不使用角度

2 个答案: