When building Angular applications, one of the cornerstones we will use is `ng-repeat`. Showing data is something that we do in applications like when we show a table of users or whatever other data we need to show our users. Today we'll be looking at a way to sort and filter our tabular data. This is a common feature that is always useful so let's look at what we'll be building and dive right into the code.
在构建Angular应用程序时，我们将使用的基石之一是ng-repeat。 显示数据是我们在应用程序中要做的事情，例如当我们显示用户表或显示用户所需的任何其他数据时。 今天，我们将研究一种排序和过滤表格数据的方法。 这是一个始终有用的通用功能，因此让我们看一下我们将要构建的内容并直接深入到代码中。
Here's a quick demo: http://codepen.io/sevilayha/pen/AmFLE/
这是一个快速演示： http : //codepen.io/sevilayha/pen/AmFLE/
http://codepen.io/sevilayha/pen/AmFLE/
http://codepen.io/sevilayha/pen/AmFLE/
## Sample Application
##示例应用
Our application will allow us to: - Show a table of data (`ng-repeat`) - Sort by ascending or descending columns (`orderBy`) - Filter by using a search field (`filter`) These are three common functions in any application and Angular let's us implement these features in a very simple way. Let's set up our sample application's HTML and Angular parts and then look at how we can sort and filter.
我们的应用程序将允许我们：-显示数据表（ng-repeat）-按升序或降序排序（`orderBy）-使用搜索字段进行过滤（`filter`）这是以下三种常见功能任何应用程序和Angular，让我们以非常简单的方式实现这些功能。 让我们设置示例应用程序HTML和Angular部分，然后看一下如何进行排序和过滤。
## Setting Up
＃＃ 配置
We'll be using Bootstrap and Font Awesome to style our app. Let's take a look at the Angular module first. This will be a simple module with one controller where we define a few variables and the list of data we'll show to our users (we'll be using sushi, yum). The files we will need are:
我们将使用Bootstrap和Font Awesome来设置应用程序样式。 首先让我们看一下Angular模块。 这将是一个具有一个控制器的简单模块，其中我们定义了一些变量以及将显示给用户的数据列表（我们将使用Sushi，Yum）。 我们将需要的文件是：
```javascript
javascript
- index.html index.html
- app.js ``` app.js```
Our demo is built inside of CodePen, so you can create the two files above or just work within your own CodePen. Here is the code for `app.js`
我们的演示是在CodePen内部构建的，因此您可以在上方创建两个文件，也可以在自己的CodePen中工作。 这是`app.js`的代码
```javascript // app.js angular.module('sortApp', []) .controller('mainController', function($scope) { $scope.sortType = 'name'; // set the default sort type $scope.sortReverse = false; // set the default sort order $scope.searchFish = ''; // set the default search/filter term // create the list of sushi rolls $scope.sushi = [ { name: 'Cali Roll', fish: 'Crab', tastiness: 2 }, { name: 'Philly', fish: 'Tuna', tastiness: 4 }, { name: 'Tiger', fish: 'Eel', tastiness: 7 }, { name: 'Rainbow', fish: 'Variety', tastiness: 6 } ]; }); ```
``javascript // app.js angular.module（'sortApp'，[]）.controller（'mainController'，function（$ scope）{$ scope.sortType ='name'; //设置默认的排序类型$ scope.sortReverse = false; //设置默认的排序顺序$ scope.searchFish =''; //设置默认的搜索/过滤条件//创建寿司卷列表$ scope.sushi = [{名称：'Cali Roll '，鱼：'Crab'，鲜味：2}，{名称：'Philly'，鱼：'金枪鱼'，鲜味：4}，{名称：'老虎'，鱼：'鳗鱼'，鲜味：7}，{名称：“彩虹”，鱼：“品种”，口味：6}];}）； ```
We have set the 3 variables and the list of sushi. Now let's use this module in our HTML. Here is the HTML we'll need for `index.html`:
我们已经设置了3个变量和寿司列表。 现在，让我们在HTML中使用此模块。 这是`index.html`所需HTML：
```markup
标记
Angular Sort and Filter
角度排序和过滤
body { padding-top:50px; }
正文{padding-top：50px; }
Sort Type: {{ sortType }} Sort Reverse: {{ sortReverse }} Search Query: {{ searchFish }}
排序类型：{{sortType}}反向排序：{{sortReverse}}搜索查询：{{searchFish}}
Sushi Roll Fish Type Taste Level {{ roll.name }} {{ roll.fish }} {{ roll.tastiness }}
寿司卷鱼类型口味级别{{roll.name}} {{roll.fish}} {{roll.tastiness}}
```
```
We are loading Bootstrap, Font Awesome, and Angular. We will also apply the Angular module named `sortApp` and the Angular controller called `mainController` to the tag.
我们正在加载Bootstrap，Font Awesome和Angular。 我们还将对标签使用名为sortApp的Angular模块和名为mainController的Angular控制器。
We are also using an ngRepeat to loop over the sushi in our `$scope.sushi` array we created in our Angular module. Our app will now look like the following: Great. We have the list of data displayed all nicely for our users. Now let's offer them some functionality by letting them sort the table.
我们还使用ngRepeat在Angular模块中创建的$ scope.sushi数组中循环寿司。 现在，我们的应用程序将如下所示：太好了。 我们为用户很好地显示了数据列表。 现在，让他们对表格进行排序，为他们提供一些功能。
## Sorting the Table
##排序表
We will be accomplishing this sorting feature using two of the variables that we created earlier ( `$scope.sortType` and `$scope.sortReverse`). We will also be using the Angular orderBy filter. Basically, applying a combination of sortType and sortReverse variables to an orderBy clause in our `ng-repeat` will sort the table.
我们将使用之前创建的两个变量（$ scope.sortType和$ scope.sortReverse）来完成此排序功能。 我们还将使用Angular orderBy过滤器。 基本上，对我们的ng-repeat中的orderBy子句应用sortType和sortReverse变量的组合将对表进行排序。
That's all we need to change the sort order of our ng-repeat. If you refresh your page, you'll see that your list is sorted by `name` in normal order. Now go into your Angular module and change the sortType variable to `$scope.sortType = 'fish'` and refresh the page. You'll now see the table sorted by Fish Type. The next step is to change the headings of our table so that they will change the `sortType` variable. That will automatically sort our table without refreshing the page (as is the Angular way).
这就是我们更改ng-repeat排序顺序的全部。 如果刷新页面，您会看到列表按“名称”以正常顺序排序。 现在进入Angular模块，将sortType变量更改为`$ scope.sortType ='fish'`并刷新页面。 现在，您将看到按“鱼类类型”排序的表格。 下一步是更改表的标题，以便它们将更改`sortType`变量。 这将自动对我们的表格进行排序，而无需刷新页面（就像Angular一样）。
### Making Table Headings Clickable
###使表标题可点击
We'll be adding links to our table headings. Let's look at the `thead` section of our site and use `ng-click` to adjust the `sortType` variable.
我们将添加指向表标题的链接。 让我们看一下网站的“ thead”部分，并使用“ ng-click”调整“ sortType”变量。
Now as you click the links across your table headers, you'll see your table sorted since we are setting the `sortType` variable using `ng-click`.
现在，当您单击表格标题上的链接时，您将看到表格已排序，因为我们使用ng-click设置了sortType变量。
### Changing the Sort Order
###更改排序顺序
Next up, we'll be adding a way to change the sort order so users can sort by ascending or descending. The orderBy filter arguments offer a third parameter for `reverse`. We just have to pass in true or false to change the sort order. Currently we have it set to `false` since we defined that as one of the variables earlier (`$scope.sortReverse`). The way we will give users the option to reverse the sort is to add `sortReverse = !sortReverse` in the `ng-click` of our table headers. This will change the order if users click the link.
接下来，我们将添加一种更改排序顺序的方法，以便用户可以通过升序或降序进行排序。 orderBy过滤器参数为`reverse`提供了第三个参数。 我们只需要输入true或false即可更改排序顺序。 目前我们将其设置为“ false”，因为我们将其定义为较早的变量之一（$ scope.sortReverse`）。 我们为用户提供反向排序选项的方法是在表标题的ng-click中添加`sortReverse =！sortReverse`。 如果用户单击链接，这将更改顺序。
Just add that to all the other `ng-click`s in the code as well. Now if you click your header links, you'll see the sort order changing. This isn't very intuitive right now though since we don't provide any sort of visual feedback that the sort is changing. Let's add carets to show up and down to represent our current sort order. We'll add an up and down caret here and then use ngShow and ngHide to show and hide the caret based on order
只需将其添加到代码中的所有其他“ ng-click”中即可。 现在，如果您单击标题链接，您将看到排序顺序发生变化。 现在这还不是很直观，因为我们没有提供任何正在改变的视觉反馈。 让我们添加尖号以显示上下以代表当前的排序顺序。 我们将在此处添加上下插入符，然后使用ngShow和ngHide根据顺序显示和隐藏插入符
Now the up arrow will only show if `sortType` is name and `sortReverse` is set to true. Applying this to the other headers will give you the same effect. With a few Angular directives, we are now able to show proper feedback for sorting and for sort order. The last part of this tutorial will deal with filtering the table of data.
现在，仅当“ sortType”为名称并且“ sortReverse”设置为true时，才会显示向上箭头。 将其应用于其他标题将获得相同的效果。 有了一些Angular指令，我们现在可以显示适当的反馈以进行排序和排序。 本教程的最后一部分将处理过滤数据表。
## Filtering the Table
##过滤表
Filtering data in an `ng-repeat` is fairly easy since Angular also comes with the filter module. There are only two things we need to do here: create the form and apply the form variable to the ng-repeat. Let's create the form first. Above the code for the `table` and below the code for the `alert`.
在ng-repeat中过滤数据非常容易，因为Angular还附带了filter模块。 在这里，我们只需要做两件事：创建表单并将form变量应用于ng-repeat。 让我们首先创建表单。 在“ table”的代码上方和在“ alert”的代码下方。
A lot of that is Bootstrap markup to style our form beautifully, but the main line we need to worry about is the `input`. This is where we define our `ng-model` to adjust the searchFish variable. Now as we type into that input box, you should see that variable change in the alert box above. With that variable bound and ready to go, all we have to do is apply it to our `ng-repeat`.
其中很多是Bootstrap标记，用于漂亮地设置表单样式，但我们需要担心的主要内容是“ input”。 这是我们定义“ ng-model”以调整searchFish变量的地方。 现在，当我们在该输入框中键入内容时，您应该在上面的警报框中看到该变量更改。 有了该变量的约束并且可以使用时，我们要做的就是将其应用于我们的ng-repeat中。
Just like that, our filter will now be applied to the table. Go ahead and type into your filter box and see the table data change. You'll also notice that the orderBy and filter will work together to find you the exact sushi roll that you want. http://codepen.io/sevilayha/pen/AmFLE
就像这样，我们的过滤器现在将应用于表。 继续并在过滤器框中键入内容，然后查看表数据的更改。 您还会注意到orderBy和filter可以一起找到您想要的确切寿司卷。 http://codepen.io/sevilayha/pen/AmFLE
http://codepen.io/sevilayha/pen/AmFLE
http://codepen.io/sevilayha/pen/AmFLE
## Conclusion
##结论
Using some built in Angular tools like ngRepeat, orderBy, filter, ngClick, and ngShow, we've been able to build a clean and fast table of data. This is a great look at the power that Angular has in building some great functionality into your own applications without too much work.
使用一些内置的Angular工具，例如ngRepeat，orderBy，filter，ngClick和ngShow，我们已经能够构建干净快速的数据表。 这是对Angular在无需过多工作的情况下将一些强大功能构建到自己的应用程序中的强大功能的很好看。
### Further Reading
###进一步阅读
For more Angular goodness, here's some other great articles: The Many Ways to Use ngClass Using ngShow and ngHide and Animating Them Single Page Animated Apps using ngView AngularJS Form Validation
为了获得更多的Angular优势，这里还有其他一些很棒的文章：使用ngShow和ngHide使用ngClass的多种方法以及使用ngView AngularJS表单验证对它们进行动画处理的单页动画应用程序
翻译自: https://scotch.io/tutorials/sort-and-filter-a-table-using-angular
扫一扫
2134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
