angularJs 的checbox的级联 和 select的级联。
angularJs 的checbox的级联 和 select的级联。
有只小跳蛙浏览 730回答 1
1回答
-
潇潇雨雨
12345678910111213141516171819202122232425<!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：12345678910111213141516171819202122232425262728293031323334353637383940414243<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: "又周二"} ]; } });
随时随地看视频慕课网APP
相关分类
AngularJS