Angularjs Variable and filter usage analysis _angularjs

This article illustrates the ANGULARJS variable and filter filter usage. Share to everyone for your reference, specific as follows:

1. About the operation of partial variables

To set a variable:

ng-init= "hour=14"//Set hour variables to be used in the DOM Data-ng-init better
$scope. Hour = 14;//Set hour variable in JS

Use variables:

(1) If the variable name is written directly in the DOM-related ng-*** attribute

Such as:

<p ng-show= "Hour >" >i am visible.</p>

(2) If it is in the controller HTML but not in the NG attribute

Using {{variable name}}

Such as:

{{Hour}}}

(3) Of course, the third is above the use of JS in the

Plus the object name $scope.

$scope. Hour

(4) The variables in the Ng-model in the form control can be directly

Use {{variable name}} in HTML at the same time

<p>name: <input type= "text" ng-model= "name" ></p>
<p>you wrote: {{name}}</p>

Variable binding can also be done through the Ng-bind property

<p>name: <input type= "text" ng-model= "name" ></p>
<p "name" ></p>

(5) You can use an expression directly in Ng's properties or variables

will automatically help you calculate the need to conform to the JS syntax

ng-show= "True?false:true"
{{5+6}}
<div ng-app= "ng-init=" points=[1,15,19,2,40] ">
  <p>the Third result is <span ng-bind= "points[2]" ></span></p>
</div>

2. The variable loop in JS

<div ng-app= "" ng-init= "names=[' Jani ', ' Hege ', ' Kai ']" >
 <ul>
  <li ng-repeat= "x in Names" >
   {{x}}
  </li>
 </ul>
</div>

3. Filter filters for variables

Filter Description
Currency format numbers in financial format
Filter selection filters left subsets from an array item.
Lowercase lowercase
Order by by an expression to sort an array
Uppercase uppercase

Such as:

<p>the name is {{LastName | uppercase}}</p>

Of course, multiple function encapsulation can be used |

<p>the name is {{LastName | uppercase | lowercase}}</p>
//Sort function Usage
<ul>
 <li ng-repeat= "X in Names |" By: ' Country ' ">
  {x.name + ', ' + X.country}}
 </li>
</ul>
//Automatically filter display results
by input content <div ng-app= "" ng-controller= "Namesctrl" >
  <p><input type= "text" ng-model= "test" ></p>
  <ul>
   <li ng-repeat= "x in Names | filter:test | By: ' Country '" >
    {{(X.name | uppercase) + ' , ' + X.country}}
   </li>
  </ul>
</div>

Names | Filter:test | By: ' Country '
is to filter the items in the names array according to the test form values
Then sort with the child element country in names

Custom filters:

 <! DOCTYPE html>