angularjs 多選框的實(shí)現(xiàn)

dreamans 發(fā)布于2019-08-23 12:17 / 2375人閱讀

摘要：目標(biāo)效果最初的想法，當(dāng)為時(shí)，多選框?yàn)楣催x狀態(tài)，而則可以與勾選的狀態(tài)值綁定，代碼如下代碼控制器中的測試數(shù)據(jù)效果顯然并不是我想要的，在全選后下面的并沒有跟著改變，所以僅靠頁面是無法實(shí)現(xiàn)全選效果的所以我在控制器里添加了一個(gè)方法，在點(diǎn)擊全選的時(shí)

目標(biāo)效果：

最初的想法，ng-checked="xxx"當(dāng)xxx為true時(shí)，多選框?yàn)楣催x狀態(tài)，而ng-model則可以與勾選的狀態(tài)值綁定，代碼如下：
html代碼

控制器中的測試數(shù)據(jù)：

效果：

顯然并不是我想要的，在全選后下面的false并沒有跟著改變，所以僅靠頁面是無法實(shí)現(xiàn)全選效果的
所以我在控制器里添加了一個(gè)方法，在點(diǎn)擊全選的時(shí)候?qū)⑺袛?shù)據(jù)的checked改變?yōu)閠rue，取消勾選時(shí)改變?yōu)閒alse
v層代碼如下：

控制器代碼如下：

效果如下：

雖然下面的狀態(tài)改變了，但沒有按照預(yù)期變化，反而是勾選時(shí)false，非勾選時(shí)為true

打開控制臺，打斷點(diǎn)，發(fā)現(xiàn)傳給c層的all為false，也就是說先進(jìn)行ng-click，然后才是ng-model的數(shù)值綁定

既然結(jié)果反著來，那么我就在傳all時(shí)也反著來

效果如下，就是我想要的

思考：為什么要反著傳值才行呢？
猜想：

總結(jié)

雖然實(shí)現(xiàn)了效果，但這樣實(shí)現(xiàn)畢竟感覺怪怪的，希望能有更好的解決方案
最后，感謝樸世超學(xué)長的幫助

云服務(wù)器 GPU云服務(wù)器 html 多選框的值多選框 asp 多選框 html的多選框

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98255.html

相關(guān)文章

AngularJs 功能（三）--數(shù)據(jù)綁定丶作用域

摘要：功能數(shù)據(jù)綁定的雙向數(shù)據(jù)綁定，一方面可以做到變化驅(qū)動(dòng)了中元素變化，另一方面也可以做到元素的變化也會影響到。其次告訴，對頁面上的這個(gè)進(jìn)行雙向數(shù)據(jù)綁定。第三告訴，在這個(gè)指令模版上顯示這個(gè)的數(shù)據(jù)。作用域是一個(gè)把一個(gè)元素連結(jié)到上的對象。功能數(shù)據(jù)綁定 AngularJS的雙向數(shù)據(jù)綁定，一方面可以做到model變化驅(qū)動(dòng)了DOM中元素變化，另一方面也可以做到DOM元素的變化也會影響到Model。 ...

joywek 2019-08-22 13:54 評論0 收藏0
構(gòu)建靜態(tài)頁面之 [ 表單 ]

摘要：表單表單元素元素表示設(shè)置表單屬性設(shè)置接收表單的指定服務(wù)器端的地址路徑屬性表示發(fā)送給服務(wù)器端的方式屬性值默認(rèn)值將提交的數(shù)據(jù)添加到地址欄中進(jìn)行提交有限制，不安全屬性值將提交的數(shù)據(jù)綁定在表單中進(jìn)行提交沒有限制，相對安全屬性提交表單時(shí)要設(shè) 表單表單元素元素表示設(shè)置表單 action屬性 - 設(shè)置接收表單的指定服務(wù)器端的地址路徑 method屬性 - 表示發(fā)送給服務(wù)器端的方式 ge...

zhangwang 2019-08-29 16:31 評論0 收藏0
構(gòu)建靜態(tài)頁面之 [ 表單 ]

摘要：表單表單元素元素表示設(shè)置表單屬性設(shè)置接收表單的指定服務(wù)器端的地址路徑屬性表示發(fā)送給服務(wù)器端的方式屬性值默認(rèn)值將提交的數(shù)據(jù)添加到地址欄中進(jìn)行提交有限制，不安全屬性值將提交的數(shù)據(jù)綁定在表單中進(jìn)行提交沒有限制，相對安全屬性提交表單時(shí)要設(shè) 表單表單元素元素表示設(shè)置表單 action屬性 - 設(shè)置接收表單的指定服務(wù)器端的地址路徑 method屬性 - 表示發(fā)送給服務(wù)器端的方式 ge...

snifes 2019-08-02 16:31 評論0 收藏0
HTML表單元素及CSS

摘要：表單一介紹標(biāo)簽表示為表單，表單元素是允許用戶在表單中輸入內(nèi)容。屬性值被提交表單的類型二表單組件組件一般被定義在表單中標(biāo)簽中標(biāo)簽表示輸入框，為空標(biāo)簽。屬性，屬性規(guī)定要顯示的元素的類型。冒號表示分隔符，分號表示結(jié)束符。表單一、介紹標(biāo)簽表示為表單，表單元素是允許用戶在表單中輸入內(nèi)容。屬性：action-提交表單的地址 Method-提交表單的方式。屬性值：get/post ...

MyFaith 2019-08-30 13:48 評論0 收藏0
HTML表單元素及CSS

摘要：表單一介紹標(biāo)簽表示為表單，表單元素是允許用戶在表單中輸入內(nèi)容。屬性值被提交表單的類型二表單組件組件一般被定義在表單中標(biāo)簽中標(biāo)簽表示輸入框，為空標(biāo)簽。屬性，屬性規(guī)定要顯示的元素的類型。冒號表示分隔符，分號表示結(jié)束符。表單一、介紹標(biāo)簽表示為表單，表單元素是允許用戶在表單中輸入內(nèi)容。屬性：action-提交表單的地址 Method-提交表單的方式。屬性值：get/post ...

jayzou 2019-08-01 17:50 評論0 收藏0