angularjs中ng-selected使用方法


ng-selected只能應用在option標簽上,就像ng-submit只能應用在form標簽上一樣。

ng-selected指令為select設置了指定的選中值,HTML規范不允許瀏覽器保存類似selected的布爾值屬性。如果我們將一個Angular的插入值表達式轉換為這樣的屬性,那么當瀏覽器刪除該屬性時,綁定信息就會丟失。這個指令不被瀏覽器刪除,並且提供了一個永久性的可靠的地方來存儲綁定信息。

今天學習ng-selected的時候,通過copy官網上的例子來實踐

click me to select radio:<input type="radio" name="name" ng-model="sel"/> 
<p>{{sel}}</p>
click me to select checkbox: <input type="checkbox" ng-model="sel"/>
<select>
    <option>Hello</option>
    <option>World</option>
    <option ng-selected="sel">greeting</option>
</select>

實踐過程中發現當選中checkbox時{{sel}}值是true,則option中greeting被選中。但是當選中radio時,greeting沒有被選中並且{{sel}}的值為空。

原因:type=radio的input沒有值,應給type=radio的input加上value值,則可以輸出{{sel}}的值,greeting也會被選中。

修改之后的代碼如下:

<input type="radio" name="name" ng-model="sel" value="male"/>male
<input type="radio" name="name" ng-model="sel" value="female"/>female
<p>{{sel}}</p>
click me to select checkbox:  <input type="checkbox" ng-model="sel"/>
<select>
        <option>Hello</option>
        <option>World</option>
        <option ng-selected="sel">greeting</option>
</select>

選中male這個單選框時,{{sel}}值為male,有值則ng-selected為true,greeting被選中。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM