如何创建与angularjs和bootstrap兼容的组和排序列表？

Question

嗨我有这样的数据。 （基本例子）

• 水果，苹果，$ 1
• 水果，橙子，$ 1
• 水果，香蕉，$ 1
• 蔬菜，豆芽，$ 2
• 蔬菜，胡萝卜，1美元
• 饮料，水，$ 1
• 饮料，牛奶，$ 2

我想有一个按水果/蔬菜/饮料（可能带手风琴）分组的清单 然后可以按子类别（例如苹果）进行排序（组排序顺序保持原样，子项目可以排序为＆gt; z z＆gt; a）。

价格需要点击，以便用户可以更改值，因此容器需要是丰富的html元素。 （下拉等）

过滤也是一种奖励。

我将使用angularJS进行数据绑定。和bootstrap也被使用。

*供您参考，数据来自SharePoint列表，我试图模仿列表行为的分组排序，但是对单页应用程序使用angular。

这是一个例子

任何人都可以推荐适合这种情况的东西吗？

Answer 1

我解决了这个问题。我使用AngularUI手风琴，然后使用Lodash进行分组和排序。