Angularjs 可根据 json 数据对项目和类别进行排序

Question

我有这个 json 结构：

{  
   "items":[  
      {  
         "category":"Category 1",
         "name":"01",
         "id":"46701a72410c"
      },
      {  
         "category":"Category 2",
         "name":"02",
         "id":"9a18ffe9f148"
      },
      {  
         "category":"Category 2",
         "name":"03",
         "id":"de3a49a458cc"
      },
      {  
         "category":"Category 3",
         "name":"04",
         "id":"bb06b1eec9c8"
      },
      {  
         "category":"Category 3",
         "name":"05",
         "id":"92973f4cfbfc"
      },
      {  
         "category":"Category 3",
         "name":"06",
         "id":"b06bbb86d278"
      }
   ],
   "categories":[  
      {  
         "isCollapsed":false,
         "name":"Category 1"
      },
      {  
         "isCollapsed":false,
         "name":"Category 2"
      },
      {  
         "isCollapsed":false,
         "name":"Category 3"
      }
   ]
}

我正在尝试使用 angularjs ui.sortable 添加排序行为。我希望类别和项目都可以排序。

我基于这个json创建了两个嵌套有序列表，但我不知道如何解决可排序设置。这个json结构可以吗？

通过这些设置，我只解决了类别排序的问题。问题是当项目被移动时（错误的位置或未定义被占用）。

$scope.sortableOptionsCategories = {
    stop: function(ev, ui) {
      console.log("Category moved.");
    }
  };

$scope.sortableOptionsItems = {
  connectWith: '.items-container',
  start: function(e, ui) {
    $(this).attr('data-previndex', ui.item.index());
    console.log("Start: from position " + ui.item.index());
  },

  update: function(e, ui) {
    var newIndex = ui.item.index();
    var oldIndex = $(this).attr('data-previndex');
    $(this).removeAttr('data-previndex');
    console.log("Update: " + oldIndex + " -> " + newIndex);
  },

  stop: function(ev, ui) {
    console.log("Item moved.");
  }
};

更新： 这是我的代码： http://codepen.io/anon/pen/LpGmeY 保持 json 的解决方案对我来说是完美的，但如果不可能，我会接受任何其他解决方案。

Answer 1

如果我理解正确的话，你有嵌套列表，你在使用嵌套的 ng-repeats 吗？

如果是这样，您似乎无法使用 sortable（来自 https://github.com/angular-ui/ui-sortable）

ng-model 是 required，以便指令知道要使用哪个模型更新。
ui-sortable 元素应该只包含一个 ng-repeat 而不是任何其他元素（高于或低于）。

可以粘贴你的HTML吗？

Answer 2

你试过使用这个库吗 - https://github.com/angular-ui-tree/angular-ui-tree

我创建了一个 jsfiddle - http://jsfiddle.net/450fk7wp/5/ - 用于处理嵌套的、可排序的、可拖动的项目。

您必须将 JSON 转换为如下所示：

$scope.rows = [{
  "name":"Category 1",
  "columns": [
    {
     "category":"Category 1",
     "name":"01",
     "id":"46701a72410c"
    }
  ],
}, {
  "name":"Category 2",
  "columns": [
    {  
       "category":"Category 2",
       "name":"02",
       "id":"9a18ffe9f148"
    },
    {  
       "category":"Category 2",
       "name":"03",
       "id":"de3a49a458cc"
    }
  ],
}, {
  "name":"Category 3",
  "columns": [
  {  
     "category":"Category 3",
     "name":"04",
     "id":"bb06b1eec9c8"
  },
  {  
     "category":"Category 3",
     "name":"05",
     "id":"92973f4cfbfc"
  },
  {  
     "category":"Category 3",
     "name":"06",
     "id":"b06bbb86d278"
  }
  ]
}];

只是不确定您正在寻找哪种类型的排序功能。

希望对您有所帮助！

Angularjs 可根据 json 数据对项目和类别进行排序

Angularjs Sortable items and categories based on json data

angularjs

angular-ui-sortable