這篇文章給大家分享的是有關(guān)AngularJS如何實(shí)現(xiàn)單選框及多選框的雙向動(dòng)態(tài)綁定的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
成都創(chuàng)新互聯(lián)長(zhǎng)期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為友好企業(yè)提供專業(yè)的做網(wǎng)站、網(wǎng)站制作,友好網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
AngularJS 在 <input type="text" /> 中實(shí)現(xiàn)雙向動(dòng)態(tài)綁定十分簡(jiǎn)單,如下所示:
<input type="text" ng-model="topic.title" />
只需要用ng-model 與 $scope 中的屬性對(duì)應(yīng),即實(shí)現(xiàn)了type=”text” 的雙向動(dòng)態(tài)綁定。當(dāng) <input type="radio" /> 及 <input type="checkbox" /> 時(shí)情況略有不同:
1. <inputtype="radio" />
<input type="radio" name="person-action" value="go_home" ng-model="person.action" />回家 <input type="radio" name="person-action" value="go_to_school" ng-model="person.action" />回學(xué)校
通過(guò) value 屬性指定選中狀態(tài)下對(duì)應(yīng)的值,并通過(guò) ng-model 將單選框與 $scope 中的屬性對(duì)應(yīng),便實(shí)現(xiàn)了 type=”radio” 時(shí)的雙向動(dòng)態(tài)綁定。
2. <input type="checkbox" />
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_sound" />鈴聲 <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_vibrate" />震動(dòng) <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_lights" />呼吸燈
通過(guò)AngularJS 的內(nèi)置指令 ng-true-value 和 ng-false-value ,指定多選框在選中和未選中狀態(tài)下對(duì)應(yīng)的值,再通過(guò)ng-model 將其與 $scope 中的屬性對(duì)應(yīng),便實(shí)現(xiàn)了type=”checkbox” 的雙向動(dòng)態(tài)綁定。
但是理想跟現(xiàn)實(shí)總是相差太多,在實(shí)際操作過(guò)程中還是出現(xiàn)了問(wèn)題。應(yīng)該是ng-repeat中scope作用域的問(wèn)題。
經(jīng)過(guò)一番搜索、調(diào)試,自己終于將此問(wèn)題解決了,效果圖如下:
核心源碼
js
var str = ""; // 原來(lái)存放選中的項(xiàng) $scope.Selected = false; //默認(rèn)未選中 var choseArr=[]; // 定義數(shù)組用于存放前端顯示 $scope.check = function(z,x){ console.log("HUY:"); console.log(z); console.log("HUYU:"); console.log(x); if (x == false) { // 選中 str = str + z + ','; } else { str = str.replace(z + ',', ''); // 取消選中 } choseArr = (str.substr(0,str.length-1)).split(','); console.log("HY:"); console.log(choseArr); $scope.number_request = choseArr.length; // 前端顯示所選數(shù)量 $scope.content_request = choseArr; // 前端顯示所選請(qǐng)求ID };
Html
<tr ng-repeat="item in querydata"> <td ng-bind="$index+1">1</td> <td><a ui-sref="#">{{item.postid}}</a></td> <td>{{item.medname}}</td> <td>{{item.medfact}}</td> <td>{{item.medcnt}}</td> <td>{{item.remark}}</td> <td>{{item.tel}}</td> <td>{{item.post_time}}</td> <td><input id={{item.postid}} type="checkbox" ng-model="Selected" ng-click="check(item.postid,Selected)" /></td> </tr>
感謝各位的閱讀!關(guān)于“AngularJS如何實(shí)現(xiàn)單選框及多選框的雙向動(dòng)態(tài)綁定”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
本文名稱:AngularJS如何實(shí)現(xiàn)單選框及多選框的雙向動(dòng)態(tài)綁定
網(wǎng)站鏈接:http://muchs.cn/article24/pidjje.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、做網(wǎng)站、服務(wù)器托管、面包屑導(dǎo)航、網(wǎng)站策劃、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)