angular js中的可排序列表

时间:2018-07-05 07:39:03

标签: angularjs

我想在angular js中创建一个可排序的列表。我想要的是我想将行排序为列并返回。但是搜索了几个小时之后,我找不到任何东西。

  <div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
      <li ng-repeat="category in categories">
        {{ category.title }}
        <ul ng-if="category.categories">
            <li ng-repeat="category in category.categories">
                {{ category.title }}
                <ul ng-if="category.categories">
                    <li ng-repeat="category in category.categories">
                        {{ category.title }}
                    </li>
                </ul>
            </li>
        </ul>
      </li>
    </ul> 
  </div>

我有这些代码和一个fiddle。我是angular js的新手

    var app = angular.module('myApp',['ui.sortable']);
    app.controller('namesCtrl', function($scope) {
        $scope.categories = [
      { 
        title: 'Row 1',
        categories: [
          {
            title: 'Column 1',
          categories: [
              {
                title: 'element'
              },
            ]
          },
          {
            title: 'Column 2'
          }
        ]
      },
      {
        title: 'Row 2',
        categories: [
          {
            title: 'Column 1',
          },
          {
            title: 'Column 2'
          }
        ]
      }
    ];
});

2 个答案:

答案 0 :(得分:0)

是的。我终于得到了答案。我向ui-sortable添加了Sortable选项。

<ul ui-sortable="sortableOptions" class="rows"> 

然后将可排序选项添加到sortableOptions

$scope.sortableOptions = {
     placeholder: 'ui-sortable-placeholder',
   connectWith:'.elements',
   }
$scope.sortableElmOption = {
     placeholder: 'ui-sortable-placeholder',
   connectWith:'.rows',
   }   

答案 1 :(得分:-1)

您可以通过这种方式使用命令(在每个ng-repeat中):

<li ng-repeat="category in categories | orderBy:'title' "> 

让我知道它是否足够工作