list.js 排序不起作用

Question

我正在尝试使用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

这是一种不好的做法 - 将 第三方 库与 angular 一起使用。

如果你继续沿着这个方向走，你会遇到很多问题。

但作为示例，请查看 jsfiddle 中的 list.js 实现。

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope, $timeout) {
    $scope.artists = [{
      "artistName": 'B',
      "albumTitle":5
    }, {
      "artistName": 'A',
      "albumTitle":2
    }, {
      "artistName": 'C',
      "albumTitle":3
    }, {
      "artistName": 'D',
      "albumTitle":4
    }];
  })
  .directive('directiveList', function($timeout) {
    return {
      restrict: "A",
      priority: 1000,
      link: function(scope, element) {
        var options = {
          valueNames: ['artistName', 'albumTitle', 'recordLabel']
        };
        scope.$watch(function() {
          return element.find('li').length;
        }, function(val) {
          if (val > 0) {
             $timeout(function(){ var artistList =  new List('artists', options);});
          }
        });

      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script>

<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">

    <div id="artists" directive-list>
      <input class="search" placeholder="Search" />
      <button class="sort" data-sort="artistName">Sort by name </button>
      <button class="sort" data-sort="albumTitle">Sort by Title </button>
      <button class="sort" data-sort="recordLabel">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="artistName ">name= {{item.artistName}}</h3>
          <p class="albumTitle ">title= {{item.albumTitle}}</p>
          <p class="recordLabel ">{{item.recordLabel}}</p>
        </li>
      </ul>

    </div>


  </div>
</div>