Front End, IT, javascript, Uncategorized

(17) AngularJs Sorting by Column Header

AngularJs Tutorial
AngularJs Tutorial
  • The data will be sorted when clicking on one of the columns headers.
  • The user should be able to sort in both the directions (ascending and descending).
  • Clicking on the column for the first time will sort the data in ascending order.
  • on the same column again will sort data in descending order.
  • An arrow (up/down) will be displayed next to the column showing the sort column and direction.

Continue reading “(17) AngularJs Sorting by Column Header”

Front End, IT, javascript, Uncategorized

(16) AngularJs Sorting using DropDown List

AngularJs Tutorial
AngularJs Tutorial
  • The data will be sorted according to the selected option in the ddl.
  • The orderBy filter allow the array sorting.
  • Some columns will be sorted descending and others will be sorted ascending, as:
  • minus sign (-) allows the descending sorting.
  • plus sign (+) allows the ascending sorting. It is the default.

 

Related posts:

(15) AngularJs Filters Example (Uppercase, Lowercase, and Date)

(14) What are the AngularJs Filters?

(13) AngularJs ng-repeat example (using module and controller)

Front End, IT, javascript, Uncategorized

(15) AngularJs Filters Example (Uppercase, Lowercase, and Date)

In the following example:

We will display the students information in the following format:

  • First name: Uppercase
  • Last name: Uppercase
  • Gender: Uppercase
  • Spec: Lowercase
  • Level: Uppercase
  • Date of Birth (DOB): Date Format

You can refer to AngularJs Date Format Reference to now more about date format.

 

 

 

Front End, IT, javascript, Uncategorized

(13) AngularJs ng-repeat example (using module and controller)

 

We recommend you to review a simple example of ng-repeat directive before reading this post.

In the following example:

  • Using AngularJs controller and module, we create an array of students.
  • Each student has (first name, last name, gender, specialization, and level) information.
  • Then, we display the students information in an html page.
  • To display each student information, we use “ng-repeat” directive.
Front End, IT, javascript, Uncategorized

(12) AngularJs Two Way Data Binding Example (Student Information Form)

  • Using the AngularJs two way data binding, when you type the student information in the input field (Enter student information part), the value will immediately be displayed on the view part (View student information part).
  • Now, we don’t need any custom code to move data from the model to the view or from the view to the model.
  • ng-model directive can be used with the (input, select, and textarea) html tags.
Front End, IT, javascript, Uncategorized

(11) AngularJs ng-src directive

In the following example, we want to display the country properties using AngularJs Code:

  • Country Flag: Path of the flag image.
  • Country Name: Palestine
  • Country Capital: Jerusalem
  • Country Language: Arabic

1. Create the module, controller, and your data.

You can return to previous AngularJs posts to learn how to write AngularJs module and controller.

screenshot-codepen.io-2018-01-30-08-47-38-632
AngularJs Module and Controller

Continue reading “(11) AngularJs ng-src directive”

Front End, IT, javascript, Uncategorized

(9) AngularJs Controller with Complex Object

The example demonstrates a controller object with more than one property: (firstname, lastname, specialization, and gender)

Note:

  • If you misspell a property name in the binding expression, angular expression will return null or undefined.
  • If you misspelled the controller name, an error will be raised, and the binding expressions will not be evaluated.
Front End, IT, javascript, Uncategorized

(8) AngularJs Modules and Controllers

  • An AngularJS module defines an application.
  • The  module is a container for the different parts of an application (controllers, services, directives, … ).
  • The controller is a JavaScript object. It controls the data of the AngularJs application.
  • Controllers always belong to a module.
  • The scope ($scope) is the binding part between the HTML (view) and the JavaScript (controller).


  • Create a JavaScript file. In the js file you should create the module, create the controller, and register controller with the module, as the following: 

1. To create the module:

                                       var app = angular.module(“myApp”, []);

     2. To create the controller: 

var myController = function ($scope){
$scope.msg = “Learning AngularJs”;
 }

3. To register the controller with the module:

myApp.controller(“myController”, myController);

Continue reading “(8) AngularJs Modules and Controllers”