- Subscribe to RSS
- Ionic 3 and Angular 5 Search and Sort List of Data
- Angular Table sort - Bootstrap 4 & Material Design
- AngularJS Table: Sort, OrderBy & Uppercase Filter [Examples]
- Sort and Filter a Table Using Angular
Ionic 3 and Angular 5 Search and Sort List of Data
Angular Table sort - Bootstrap 4 & Material Design
Almost every Ionic 3 or Angular 5 application that has a list need to searching and sorting the list. We will build the searching and sorting of the list of data that loaded to an array. We will use the same API call as the previous tutorial for load Country list. The main purpose of this tutorial is to populate existing data using Angular pipes. There are ready to use Angular pipes modules, but we will create our own from scratch. Before starting with the main steps, make sure the above tools, frameworks, and modules are up to date. For Node. To check your local version type this command on the terminal or Node. The Ionic 3 app created and automatically installing Node modules. Now, go to the newly created Ionic 3 app folder. As we said at the beginning of this tutorial, we have to load all Country data from free API to an array. Next, type this command to generate a service or provider. Now, add string variable for URL before the constructor. For searching and sorting countries data, simply just create the pipes. Type this command to generate a pipe. That's it, you can find the full source code on our GitHub. We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ionic 4 - Full Starter App and save development and design time. That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can take the following cheap course:. Toggle navigation. NET Core. All Articles.
AngularJS Table: Sort, OrderBy & Uppercase Filter [Examples]
Tables are one of the common elements used in HTML when working with web pages. In short, the ng-repeat directive is used to fill in table data. We will look at how to achieve this during this chapter. However, the data is populated by using the ng-repeat directive in AngularJS. Let's look a simple example of how we can implement Angular tables. In this example, We are going to create an Angular table which will have course topics along with their descriptions. Step 1 We are first going to add a "style" tag to our HTML page so that the table can be displayed as a proper table. The style tag is added to the HTML page. This is the standard way to add any formatting attributes which are required for HTML elements. We are adding two style values to our table. One is that there should be a solid border for our Angular table and Second is that there should be padding put in place for our Angular table data. Step 2 The next step is to write the code to generate the table, and it's data. Each key-value pair will be used as data when displaying the table. The tutorial variable is then assigned to the scope object so that it can be accessed from our view. For each row of data, we are using the "ng-repeat directive". This directive goes through each key-value pair in the tuto,rial scope object by using the variable ptutor. Name and ptutor. Description to display the Angular table data. If the code is executed successfully, the following Output will be shown when you run your code in the browser. Output: From the above output, We can see that the table is displayed properly with the data from the array of key-value pairs defined in the controller. The table data was generated by going through each of the key-value pairs by using the "ng-repeat directive". AngularJS in-built Filter It's very common to use the inbuilt filters within AngularJS to change the way the data is displayed in the tables. We have already seen filters in action in an earlier chapter. Let's have a quick recap of filters before we proceed ahead. In Angular. JS filters are used to format the value of expression before it is displayed to the user. An example of a filter is the 'uppercase' filter which takes on a string output and formats the string and displays all the characters in the string as uppercase. Sort Table with OrderBy Filter This filter is used to sort the table based on one of the table columns. In the previous example, the output for our Angular table data appeared as shown below. Controllers Controllers in action Models Models and binding data Directives Flexibility of Directives Let's look at an example, on how we can use the "orderBy" filter and sort the Angular table data using the first column in the table. In this case, we are saying that we want to order the table by the key "Name". Output: From the output, We can see that the data in the Angular table has been sorted as per the data in the first column. In our dataset, the "Directives" data comes from the "Models" data, but because we applied the orderBy filter, the tables get sorted accordingly. Display Table with Uppercase Filter We can also use the uppercase filter to change the data in the Angular table to uppercase. Let's take a look at an example of how we can achieve this. We are using this filter in conjunction with the "ptutor. Name" so that all of the text in the first column will be displayed in uppercase.