您好,登錄后才能下訂單哦!
小編給大家分享一下AngularJS中ng-checked的示例分析,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
1.需求
在添加頁面實(shí)現(xiàn)一個(gè)checkbox的選擇,然后在詳情頁面展示時(shí),會(huì)自動(dòng)選上之前被選中的。
2.添加頁面
看官最好將這個(gè)代碼復(fù)制過去看看效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl" > 選擇 <div ng-repeat="item in list"> <input type="checkbox" name="tagName" value="item.id" ng-click="select(item.id,$event)"> {{item.shortName}} </div> 結(jié)果:{{result}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { //創(chuàng)建checkbox用的 $scope.list=[{"id":1,"shortName":"張三"},{"id":2,"shortName":"李四"},{"id":3,"shortName":"王二"}]; //存儲(chǔ)已選 $scope.result = []; //觸發(fā)事件 $scope.select = function(id,event){ console.log(event)//打印看看這是什么,有利于理解 console.log(action) var action = event.target; if(action.checked){//選中,就添加 if($scope.result.indexOf(id) == -1){//不存在就添加 $scope.result.push(id); } }else{//去除就刪除result里 var idx = $scope.result.indexOf(id); if( idx != -1){//不存在就添加 $scope.result.splice(idx,1); } } }; }); </script> </body> </html>
3.詳情展示
//假設(shè)添加頁面的結(jié)果是:$scope.result = [3,2]; <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl" > 回寫時(shí)設(shè)置不可選,即設(shè)ng-disabled="true" <div ng-repeat="item in list"> <input type="checkbox" name="tagName" ng-checked="isSelected(item.id)" value="item.id" ng-disabled="true" > {{item.shortName}} </div> 結(jié)果:{{result}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { //創(chuàng)建checkbox用的 $scope.list=[{"id":1,"shortName":"張三"},{"id":2,"shortName":"李四"},{"id":3,"shortName":"王二"}]; //在添加頁面得到的結(jié)果 //你會(huì)發(fā)現(xiàn),順序也不會(huì)影響結(jié)果 $scope.result = [3,2]; //被選中條件:ng-checked的結(jié)果為true $scope.isSelected = function(id){ return $scope.result.indexOf(id)!=-1; //只要返回的結(jié)果為true,則對(duì)應(yīng)的checkbox就會(huì)被選中, //所以我的思路是看存添加頁面的結(jié)果里是否含有當(dāng)前id即value值, //有就返回的true,沒有就返回false }; }); </script> </body> </html>
看完了這篇文章,相信你對(duì)“AngularJS中ng-checked的示例分析”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。