list.js 排序和视图更改不适用于 angular

Question

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

中提到了来源

我正试图复制这个 codepen 但 angular.

我知道 angular 排序！

问题：排序和视图更改似乎不起作用

<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

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';
                }
            }
        }
    });

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

我已经添加了排序和更改的基本代码view.Do您需要整个解决方案吗？

Answer 2

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

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

现在您需要像这样将过滤器函数添加到您的代码中

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

list.js 排序和视图更改不适用于 angular

list.js sorting and view change not working with angular

angularjs

sorting

listjs