AngularJS 表達(dá)式詳解及實(shí)例代碼

更新時(shí)間：2016年09月14日 16:52:58 投稿：lqh

這篇文章主要介紹了AngularJS 表達(dá)式，這里整理了詳細(xì)的資料，有需要的小伙伴可以參考下

前面了解了AngularJS的基本用法，這里就跟著PDF一起學(xué)習(xí)下表達(dá)式的相關(guān)內(nèi)容。

　　在AngularJS中的表達(dá)式，與js中并不完全相同。

　　首先它的表達(dá)式要放在{{}}才能使用，其次相對(duì)于javascript中的表達(dá)式概念，它有以下幾點(diǎn)不同：

　　1 作用域不同

　　在javascript中默認(rèn)的作用于是window，但是在angularJs中就不同了。它使用$scope控制作用于。

　　2 允許未定義的值

　　在angularjs中，如果使用了未定義的表達(dá)式，也不會(huì)出現(xiàn)錯(cuò)誤，直接返回空值。

　　3 過(guò)濾器

　　可以在表達(dá)式中使用 | 管道命令符，添加過(guò)濾器，與UNIX的命令行類似。

　　4 $符號(hào)

　　用以區(qū)別angular的方法與用戶自定義的方法。

　　下面看一段小代碼：

<!doctype html>
<html ng-app>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="ctl">
      name:<input ng-model="name" type="text">
      <button ng-click="reset()">reset</button>
      <br>
      {{name}}
      <br>
      hello ! {{test}}
      <br>
      filter : {{name | uppercase}}
    </div>
    <script type="text/javascript">
      function ctl($scope){
        var str = "init";
        $scope.name = str;

        $scope.reset = function(){
          $scope.name = str;
        }
      }
    </script>
  </body>
</html>

　　通過(guò)reset觸發(fā)reset方法，重置name變量的內(nèi)容；

　　在表達(dá)式中，引用了未定義的test，但是并沒(méi)有報(bào)錯(cuò)，直接默認(rèn)顯示為空；—— {{test}}

　　最后使用過(guò)濾器，將表達(dá)式中name的值轉(zhuǎn)化成大寫(xiě)。—— {{name | uppercase}}

　　運(yùn)行結(jié)果：

以上就是對(duì)AngularJS 表達(dá)式的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家的支持！

您可能感興趣的文章:

相關(guān)文章

Web前端框架Angular4.0.0 正式版發(fā)布
經(jīng)歷了 6 個(gè) RC 版本之后，Angular 發(fā)布了 4.0.0 正式版。下面這篇文章主要給大家介紹了關(guān)于Web前端框架Angular4.0.0 正式版發(fā)布的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。
2017-03-03
AngularJS學(xué)習(xí)筆記（三）數(shù)據(jù)雙向綁定的簡(jiǎn)單實(shí)例
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記（三）數(shù)據(jù)雙向綁定的簡(jiǎn)單實(shí)例，詳解數(shù)據(jù)雙向綁定實(shí)例的相關(guān)資料,需要的朋友可以參考下。
2016-11-11
使用Angular CLI進(jìn)行單元測(cè)試和E2E測(cè)試的方法
這篇文章主要介紹了使用Angular CLI進(jìn)行單元測(cè)試和E2E測(cè)試的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
Angular自定義指令Tooltip的方法實(shí)例
現(xiàn)實(shí)世界千變?nèi)f化,區(qū)區(qū)幾種內(nèi)置指令不可能滿足所有的需求,下面這篇文章主要給大家介紹了關(guān)于Angular自定義指令Tooltip的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-05-05
Angular用來(lái)控制元素的展示與否的原生指令介紹
這篇文章主要介紹了Angular用來(lái)控制元素的展示與否的原生指令的用法及區(qū)別，非常詳細(xì)，這里推薦給小伙伴們
2015-01-01
詳解Angular2 之結(jié)構(gòu)型指令
本篇文章主要介紹了詳解Angular2 之結(jié)構(gòu)型指令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
Angular自定義組件實(shí)現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實(shí)例
下面小編就為大家分享一篇Angular自定義組件實(shí)現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
深入理解Angular.JS中的Scope繼承
這篇文章主要給大家深入的介紹了關(guān)于Angular.JS中Scope繼承的相關(guān)資料，Angular。JS中scope之間的繼承關(guān)系使用JavaScript的原型繼承方式實(shí)現(xiàn)，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-06-06
使用AngularJS制作一個(gè)簡(jiǎn)單的RSS閱讀器的教程
這篇文章主要介紹了使用Angular.js制作一個(gè)簡(jiǎn)單的RSS閱讀器的教程,AngularJS是一個(gè)非常有人氣的JavaScript庫(kù),文中介紹的制作方法主要使用到了FreedReadR模版,需要的朋友可以參考下
2015-06-06
Angular學(xué)習(xí)筆記之a(chǎn)ngular的$filter服務(wù)淺析
本文是小編記錄的angular學(xué)習(xí)筆記，通過(guò)本文首先給大家介紹了$filter服務(wù)，然后介紹下內(nèi)置filter及filter的簡(jiǎn)單使用，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-11-11