SoFunction
Updated on 2025-04-13

Analysis of the usage of AngularJS variables and filters

This article describes the usage of AngularJS variables and filter Filter. Share it for your reference, as follows:

1. About the operation of some variables

Set variables:

ng-init="hour=14" //Set the hour variable in the DOM and use data-ng-init$ = 14; //Set the hour variable in js

Use variables:

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

like:

<p ng-show="hour > 13">I am visible.</p>

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

Use {{variable name}}

like:

{{hour}}

(3) Of course, the third type is the above.

Add object name $scope.

$

(4) In the form control, variables in ng-model can be directly

Also use {{variable name}} in html

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

Variable binding can also be performed through the ng-bind attribute

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

(5) Expressions can be used directly in ng's properties or variables

It will automatically calculate for you. It needs to comply with 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. 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 of variables

Filter         Description
currency     Format numbers in financial format
filter
lowercase   lowercase
orderBy    Sorting arrays by expressions
uppercase   capital

like:

<p>The name is {{ lastName | uppercase }}</p>

Of course multiple function encapsulation can be used |

&lt;p&gt;The name is {{ lastName | uppercase | lowercase }}&lt;/p&gt;
//Use of sorting functions&lt;ul&gt;
 &lt;li ng-repeat="x in names | orderBy:'country'"&gt;
  {{  + ', ' +  }}
 &lt;/li&gt;
&lt;/ul&gt;
// Automatically filter the results by inputting content&lt;div ng-app="" ng-controller="namesCtrl"&gt;
  &lt;p&gt;&lt;input type="text" ng-model="test"&gt;&lt;/p&gt;
  &lt;ul&gt;
   &lt;li ng-repeat="x in names | filter:test | orderBy:'country'"&gt;
    {{ ( | uppercase) + ', ' +  }}
   &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

names | filter:test | orderBy:'country'
It is to filter items in the names array according to the test form value.
Then sort by the child element in names country

Custom filters:

&lt;!DOCTYPE html&gt;
&lt;html ng-app="HelloApp"&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body ng-controller="HelloCtrl"&gt;
 &lt;form&gt;
   &lt;input type="text" ng-model="name"/&gt;
 &lt;/form&gt;
 &lt;div&gt;{{name|titlecase}}&lt;/div&gt;
 &lt;script type="text/javascript" src="/ajax/libs/angularjs/1.2.23/"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
  // Write filter module  ('CustomFilterModule', [])
      .filter( 'titlecase', function() {
    return function( input ) {
      return (/\w\S*/g, function(txt){return (0).toUpperCase() + (1).toLowerCase();});
  }
  });
  // Actual display module  // Introduce dependent filter module CustomFilterModule  ('HelloApp', [ 'CustomFilterModule'])
    .controller('HelloCtrl', ['$scope', function($scope){
    $ = '';
  }])
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

I hope this article will be helpful to everyone's AngularJS programming.