AngularJS（十一）表達式

轉載地址：http://www.cnblogs.com/liulangmao/p/3720214.html

本篇只要介紹angular表達式:

在之前的例子中,我們多半是直接把數據作爲angular標識符的值,但其實可以使用表達式來做更多的事情:

比如:

{{number}} 

也可以是: {{number+10}} (將數據進行簡單的運算)

也可以是: {{someFun()/10}} (調用方法得到結果,同時經過簡單運算)

又比如:

ng-class={hight: ifHigh}

也可以是: {hight: $index%4 >= compute($index)} (調用方法,簡單運算,傳入參數)

 

以上這些僅僅是舉例,表達式雖然方便,但實際中應該儘量把帶有邏輯的運算放入控制器中,而不是在ui中進行.

表達式是用angular自定義的解析方式計算的,不是javascript的eval(),因此是有限的.只限用於一些基本,簡單的操作,比如:

計算(+,-,*,/%)

比較(==,!=,<,>,>=,<=)

布爾邏輯(&&,||,!)

數組和對象([],{})

調用方法,傳入參數(fun(i))

 

不能夠使用:

++,--,if,else,throw,for,while,...

 

表達式最大的有點在於,能夠兼容undefined和null,不會報錯,而是簡單的不渲染任何內容.而一旦它被賦值了,就會立刻顯示正確的內容

 

本篇只要介紹angular表達式:

在之前的例子中,我們多半是直接把數據作爲angular標識符的值,但其實可以使用表達式來做更多的事情:

比如:

{{number}} 

也可以是: {{number+10}} (將數據進行簡單的運算)

也可以是: {{someFun()/10}} (調用方法得到結果,同時經過簡單運算)

又比如:

ng-class={hight: ifHigh}

也可以是: {hight: $index%4 >= compute($index)} (調用方法,簡單運算,傳入參數)

 

以上這些僅僅是舉例,表達式雖然方便,但實際中應該儘量把帶有邏輯的運算放入控制器中,而不是在ui中進行.

表達式是用angular自定義的解析方式計算的,不是javascript的eval(),因此是有限的.只限用於一些基本,簡單的操作,比如:

計算(+,-,*,/%)

比較(==,!=,<,>,>=,<=)

布爾邏輯(&&,||,!)

數組和對象([],{})

調用方法,傳入參數(fun(i))

 

不能夠使用:

++,--,if,else,throw,for,while,...

 

表達式最大的有點在於,能夠兼容undefined和null,不會報錯,而是簡單的不渲染任何內容.而一旦它被賦值了,就會立刻顯示正確的內容