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 关注
- 720 浏览
添加回答
举报
0/150
提交
取消