javascript - angular.js 中的雙花括號{{}}問題
問題描述
<p ng-controller='listCtrl'> <h1>這是列表頁面</h1> <ul><li ng-repeat='item in myList'><a href='http://www.cgvv.com.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 }}包裹的模板變量,當(dāng)需要直接輸出變量值,而無需額外解析(如過濾器處理、作為指令參數(shù)、作為函數(shù)參數(shù))時使用,反之,ng-click='jump(’/myDetail/’+ $index)' 是在指令中調(diào)用的參數(shù)。
回答3:簡單的判定標(biāo)準(zhǔn)就是
如果當(dāng)前屬性所賦值的類型為字面量類型,比如html模板中的屬性,或者指令中以@為修飾符的屬性,那么賦值的時候如果不加雙花括號,均是按字面量來算的,想要按變量的方式解析,就需要加雙花括號。
如果當(dāng)前屬性所賦值的類型是非字符串類型,比如angular模板中的各種內(nèi)置指令,或者指令中以<、=、&修飾的屬性,那么賦值的時候會按js的語法規(guī)則進行解析,這種情況就不需要加花括號了。
回答4:先說明下Angular中的兩種類型:
模板:格式為{{...}},實質(zhì)是字符串,會被解析引擎展開成可以識別的字符串文本表達式:可以直接運行的代碼,和JS寫法基本一致,只是省略了所有的this。
然后你可以參照一下上下文,確定你現(xiàn)在是在寫類似JS的部分,還是在寫一個字符串文本,這樣就容易判斷你是需要模板還是表達式了。
相關(guān)文章:
1. css - C#與java開發(fā)Windows程序哪個好?2. mysql無法添加外鍵3. css - 定位為absolute的父元素中的子元素 如何設(shè)置在父元素的下面?4. java - Mybatis查詢數(shù)據(jù)庫時出現(xiàn)查詢getInt()的錯誤5. JavaScript事件6. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?7. javascript - es6將類數(shù)組轉(zhuǎn)化成數(shù)組的問題8. 在mac下出現(xiàn)了兩個docker環(huán)境9. css3 - flex 父標(biāo)簽設(shè)置align-item:center,子元素flex:1,不起作用10. java - 是否類 類型指針、引用作為形參 ,函數(shù)結(jié)束不會自動析構(gòu)類?
