代码之家 › 专栏 › 技术社区 › melvin

角度JS中的可排序列表

angularjs

melvin · 技术社区 · 6 年前

  <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

    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 回复 | 直到 6 年前

melvin 6 年前

对。我终于得到了答案。我将可排序选项添加到 ui-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

Jignesh Sanghvi 6 年前

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

让我知道是否足够工作

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前