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

使用带有角度的第三方库是不好的做法。

如果继续遵循这个方向，你会遇到很多问题。

但作为一个例子，请查看jsfiddle中的实施 list.js 。

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

db.execSQL("CREATE TABLE " + TABLE_NAME + " (" 
                    + ID + " INTEGER PRIMARY KEY AUTOINCREMENT, "
                    + NAME + " TEXT, "                  
                    + AGE + " TEXT, "

                    + LASTCHILDAGE + " TEXT, " 
                    + IMAGELOCATION + " TEXT);");

list.js排序不起作用

1 个答案: