list.js sıralama çalışmıyor

Question

list.js'u kullanarak (ad, başlık, etiket, görünüm) verileri sıralamaya çalışıyorum. Bower'ı kullanarak list.js'yi yükledim ve html şablonunda kaynaktan bahsettim. <script src="/static/vendors/list.js/dist/list.min.js"></script>.

Tam olarak bu codepen'u çoğaltmaya çalışıyorum ama açılıyorum.

Not: Açısal sıralama hakkında bilgim var!

Sorun:Sıralama ve görünüm değişikliği

<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

Kötü bir uygulamadır iş gibi görünüyor değil - açısal ile üçüncü parti kütüphaneleri kullanmak. Bu yöne devam ederseniz çok fazla sorun yaşayacaksınız.

Ancak, örnek olarak, jsfiddle numaralı telefondan list.js uygulamasına bakın.

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>