list.js sıralama ve görünüm değişkeni açısal olarak çalışmadı

Sanatçı bilgilerini açısal kapsamda kullanıyorum ve şablondaki tüm sanatçı bilgilerini listelemek için yinelemek için ng-yineliğini kullanın. list.js kullanarak (ad, başlık, etiket, görünüm) verileri sıralamak ç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>.list.js sıralama ve görünüm değişkeni açısal olarak çalışmadı

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

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>

kaynak

2016-04-07 MysticCodes

Olası yinelenen gibi kodunuzu filtre işlevini eklemeniz gerekir son öğe

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

kılındığını zaman kontrol edecek [list.js sıralama çalışmıyor] (http://stackoverflow.com/questions/36493635/list-js-sortin g-not-working) –

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>

i sıralamak için temel kodu ve değişim görünümünü eklemiş iş gibi görünüyor değil .Tüm çözümlere ihtiyacınız var mı? Açısal veriler son verilerinizi döndürdikten sonra list2'nin çalışması gerekir.

kaynak

2016-04-07 06:39:18 Batman

Batman - Bu harika! Fakat bu http://codepen.io/mcintosh101/pen/iDLag/ – MysticCodes

için yukarıdaki listeyi kullanarak list.js'yi kullanarak değişiklik yapmayı ve görüntülemeyi mi arıyorsunuz? – Batman

Evet! Tasarımım buna dayandığından, yukarıda bahsedilen kod ölçüsüne göre sıralama işlevini sıralama ve görüntüleme işlevine sahip olmak güzel olurdu. – MysticCodes

böylece ng-tekrarında bunu yap. onun şimdi bu

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

kaynak

2016-11-15 14:32:03 nokiko

list.js sıralama ve görünüm değişkeni açısal olarak çalışmadı

cevap

İlgili konular