AngularJS 変数とフィルターの使用状況の分析-jsチュートリアル-php.cn

AngularJS 変数とフィルターの使用状況の分析

高洛峰

リリース： 2016-12-05 17:06:41

オリジナル

1122 人が閲覧しました

この記事の例では、AngularJS 変数とフィルターの使用法について説明します。参考までに皆さんに共有してください。詳細は以下の通りです:

1. いくつかの変数の操作について

変数の設定:

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

ログイン後にコピー

変数の使用:

(1) DOM関連の場合はNG -*** 変数名を属性

に直接記述します。例:

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

ログイン後にコピー

(2) コントローラーの HTML にあるが ng 属性にない場合

使用 {{変数名}}

例:

{{hour}}

ログイン後にコピー

(3) もちろん、3番目の方法は、jsで上記を使用することです

とオブジェクト名$scope.

$scope.hour

ログイン後にコピー

(4) フォームコントロール内、ng-model の変数は同時に直接

することができます。html

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

ログイン後にコピー

で{{変数名}}を使用してください

また、ng-bind属性を通して変数をバインドすることもできます

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

ログイン後にコピー

(5) 式を ng 属性または変数で直接使用できます

は、必要な js 構文の計算を自動的にサポートします

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. 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.フィルター財務形式で数値を書式設定する

filter 配列項目からサブセットをフィルターする場合に選択します。

小文字小文字
orderBy 式で配列を並べ替えます
大文字大文字

例:

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

ログイン後にコピー

もちろん、複数の関数パッケージを使用できます |

<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>

ログイン後にコピー

names | orderBy: 'country'

は、テストフォームの値

に従って names 配列内の項目をフィルターし、name のサブ要素 country によって並べ替えます

カスタムフィルター:

<!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>

ログイン後にコピー