list.js sorting not working

Question

I am trying to sort (name, title, label, view) data using list.js. I have installed list.js using bower and mentioned the source in the html template <script src="/static/vendors/list.js/dist/list.min.js"></script>.

I am exactly trying to replicate this codepen but with angular.

Note: I am aware about angular sorting!

Problem: Sorting and view change doesn't seems to work

<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

It is bad practice - to use third-party libraries with angular.

You will have a lot of problems if you continue to follow this direction.

But as an example, look at the implementation list.js in jsfiddle.

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>