angularJs 的checbox的級聯 和 select的級聯。
1 回答
瀟瀟雨雨
TA貢獻1833條經驗 獲得超4個贊
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!doctype html> <html ng-app="demo"> <head> <meta charset="UTF-8"> <title>angularjs</title> </head> <body> <div ng-controller="CheckboxCtrl"> <label for="chkAll">全選:</label><input id="chkAll" type="checkbox" ng-model="chkall" ng-click="chkAll(chkall)"/> <div ng-repeat="item in chkArr"> <input type="checkbox" ng-model="item.checked"/>{{item.text}} </div> <div>你選中的是:{{choseArr}}</div> </div> <hr/> <div ng-controller="SelectCtrl"> <select ng-model="selectMod" ng-options="o.id as o.text for o in select1" ng-change="selChange(selectMod)"> <option value="">-- 請選擇 --</option> </select> <select ng-model="selectMod2" ng-options="o.id as o.text for o in select2"> <option value="">-- 請選擇 --</option> </select> </div> </body> </html> |
javascript：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <script src="這里填寫你本地的地址angularjs/1.0.8/angular.min.js"></script> <script type="text/javascript"> var demo = angular.module('demo', []); demo.controller('CheckboxCtrl', function($scope, $filter){ $scope.chkall = false; $scope.chkArr = [ {id: 1, text: "足球",checked: false}, {id: 2, text: "藍球",checked: false}, {id: 3, text: "乒乓球",checked: false}, {id: 4, text: "網球",checked: false} ]; $scope.chkAll = function(checked){ angular.forEach($scope.chkArr, function(value, key){ value.checked = checked; }); }; $scope.$watch('chkArr', function(nv, ov){ if(nv == ov){ return; } $scope.choseArr = []; angular.forEach( $filter('filter')(nv, {checked: true}), function(v) { $scope.choseArr.push(v.text); }); $scope.chkall = $scope.choseArr.length == $scope.chkArr.length; }, true); });
//ajax請求省略 $scope.select1 = [ {id: 1, text: "不同的數據"}, {id: 2, text: "今天是周一"} ]; $scope.selChange = function(id){ //這里應該ajax請求返回一個list就是下面的$scope.select2 $scope.select2 = [ {id: 1, text: "不同數據1"}, {id: 2, text: "又周二"} ]; } }); |
- 1 回答
- 0 關注
- 747 瀏覽
添加回答
舉報
0/150
提交
取消