javascript - angular.js 中的雙花括號{{}}問題
問題描述
<p ng-controller='listCtrl'> <h1>這是列表頁面</h1> <ul><li ng-repeat='item in myList'><a href='http://m.4tl426be.cn/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的部分,還是在寫一個字符串文本,這樣就容易判斷你是需要模板還是表達式了。
相關(guān)文章:
1. javascript - 奇怪的Symbol的問題2. angular.js - angular ng-class里面的引號問題3. docker - 如何修改運行中容器的配置4. javascript - 有沒有什么好的圖片懶加載的插件,需要包含監(jiān)聽頁面滾動高度,然后再加載的功能5. javascript - history.replaceState()無法改變query參數(shù)6. 網(wǎng)頁爬蟲 - 用Python3的requests庫模擬登陸B(tài)ilibili總是提示驗證碼錯誤怎么辦?7. mysql無法添加外鍵8. matplotlib - python函數(shù)的問題9. javascript - vue過渡效果 css過渡 類名的先后順序10. javascript - es6將類數(shù)組轉(zhuǎn)化成數(shù)組的問題
