javascript - angular.js 中的雙花括號{{}}問題
問題描述
<p ng-controller='listCtrl'> <h1>這是列表頁面</h1> <ul><li ng-repeat='item in myList'><a href='http://m.b3g6.com/wenda/13666.html#/myDetail/{{$index}}'>{{item}}</a></li><li ng-repeat='item in myList'><button ng-click='jump(’/myDetail/’+$index)'>{{item}}</button></li> </ul></p>
如題,如上的代碼中,我需要取到$index值作為參數(shù),在第一個li中需要加{{}}才能取到值,而第二個li中不需要加;這個該如何區(qū)分??
問題解答
回答1:在原生html里面為了解析數(shù)據(jù),需要使用{{}}來綁定數(shù)據(jù),而ng的命令后面沒有這需要。
回答2:{{ $var }}包裹的模板變量,當需要直接輸出變量值,而無需額外解析(如過濾器處理、作為指令參數(shù)、作為函數(shù)參數(shù))時使用,反之,ng-click='jump(’/myDetail/’+ $index)' 是在指令中調(diào)用的參數(shù)。
回答3:簡單的判定標準就是
如果當前屬性所賦值的類型為字面量類型,比如html模板中的屬性,或者指令中以@為修飾符的屬性,那么賦值的時候如果不加雙花括號,均是按字面量來算的,想要按變量的方式解析,就需要加雙花括號。
如果當前屬性所賦值的類型是非字符串類型,比如angular模板中的各種內(nèi)置指令,或者指令中以<、=、&修飾的屬性,那么賦值的時候會按js的語法規(guī)則進行解析,這種情況就不需要加花括號了。
回答4:先說明下Angular中的兩種類型:
模板:格式為{{...}},實質(zhì)是字符串,會被解析引擎展開成可以識別的字符串文本表達式:可以直接運行的代碼,和JS寫法基本一致,只是省略了所有的this。
然后你可以參照一下上下文,確定你現(xiàn)在是在寫類似JS的部分,還是在寫一個字符串文本,這樣就容易判斷你是需要模板還是表達式了。
相關文章:
1. javascript - sublime快鍵鍵問題2. javascript - immutable配合react提升性能?3. vue.js - Vue 如何像Angular.js watch 一樣監(jiān)聽數(shù)據(jù)變化4. 如何解決Centos下Docker服務啟動無響應,且輸入docker命令無響應?5. 實現(xiàn)bing搜索工具urlAPI提交6. javascript - 移動端上不能實現(xiàn)拖拽布局嗎?7. angular.js - 單頁應用(ng/vue)該如何監(jiān)聽用戶離開當前頁面(或者路由)?8. javascript - ios返回不執(zhí)行js怎么解決?9. thinkPHP5中獲取數(shù)據(jù)庫數(shù)據(jù)后默認選中下拉框的值,傳遞到后臺消失不見。有圖有代碼,希望有人幫忙10. index.php錯誤,求指點

網(wǎng)公網(wǎng)安備