Heim > Artikel > Web-Frontend > AngularJS-Variablen- und Filternutzungsanalyse

AngularJS-Variablen- und Filternutzungsanalyse

高洛峰Original: 2016-12-05 17:06:411050Durchsuche

Die Beispiele in diesem Artikel beschreiben die Verwendung von AngularJS-Variablen und -Filtern. Teilen Sie es allen als Referenz mit. Die Details lauten wie folgt:

1. Bezüglich der Funktionsweise einiger Variablen

Festlegen von Variablen:

ng-init="hour=14" //设置hour变量在DOM中 使用data-ng-init 更好些
$scope.hour = 14; //设置hour变量在js中

Variablen verwenden:

(1) Wenn Sie den Variablennamen direkt in das DOM-bezogene ng-***-Attribut

schreiben, wie zum Beispiel:

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

(2) Wenn es im Controller-HTML, aber nicht im ng-Attribut

ist, verwenden Sie {{Variablenname}}

wie zum Beispiel:

{{hour}}

(3) Die dritte Möglichkeit besteht natürlich darin,

plus den Objektnamen $ zu verwenden Geltungsbereich.

$scope.hour

(4) In der Formularsteuerung können die Variablen im ng-Modell direkt

und auch sein Verwenden Sie {{Variablenname}}

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

Sie können Variablen auch über das ng-bind-Attribut binden

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

(5) Sie können Ausdrücke direkt in NG-Attributen oder -Variablen verwenden

hilft Ihnen automatisch bei der Berechnung der JS-Syntax, die erfüllt werden muss

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 Schleife in js

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

3. Variabler Filterfilter

Filterbeschreibung

Währung Mit Finanzformat Formatnummer

Filter Wählen Sie diese Option aus, um eine Teilmenge aus einem Array-Element zu filtern.
Kleinbuchstaben Kleinbuchstaben
orderBy Sortieren Sie das Array nach Ausdruck
Großbuchstaben Großbuchstaben

Zum Beispiel:

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

Von Natürlich können mehrere Funktionspakete verwendet werden.

<p>The name is {{ lastName | uppercase | lowercase }}</p>
//排序函数的使用
<ul>
 <li ng-repeat="x in names | orderBy:&#39;country&#39;">
  {{ x.name + &#39;, &#39; + x.country }}
 </li>
</ul>
//通过输入内容自动过滤显示结果
<div ng-app="" ng-controller="namesCtrl">
  <p><input type="text" ng-model="test"></p>
  <ul>
   <li ng-repeat="x in names | filter:test | orderBy:&#39;country&#39;">
    {{ (x.name | uppercase) + &#39;, &#39; + x.country }}
   </li>
  </ul>
</div>

Namen | orderBy:'country'

Namens-Array nach Filtern Sie den Testformwert

und sortieren Sie dann nach dem Unterelement Land in Namen

Benutzerdefinierter Filter:

<!DOCTYPE html>
<html ng-app="HelloApp">
<head>
<title></title>
</head>
<body ng-controller="HelloCtrl">
 <form>
   <input type="text" ng-model="name"/>
 </form>
 <div>{{name|titlecase}}</div>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <script type="text/javascript">
  // 编写过滤器模块
  angular.module(&#39;CustomFilterModule&#39;, [])
      .filter( &#39;titlecase&#39;, function() {
    return function( input ) {
      return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
  }
  });
  // 实际展示模块
  // 引入依赖的过滤器模块 CustomFilterModule
  angular.module(&#39;HelloApp&#39;, [ &#39;CustomFilterModule&#39;])
    .controller(&#39;HelloCtrl&#39;, [&#39;$scope&#39;, function($scope){
    $scope.name = &#39;&#39;;
  }])
</script>
</body>
</html>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie die Function-Funktion für den Einstieg in jsNächster Artikel：So verwenden Sie die Function-Funktion für den Einstieg in js

In Verbindung stehende Artikel

Mehr sehen