二级联动(angular实现)

最新推荐文章于 2019-10-11 10:56:31 发布

梵韵

最新推荐文章于 2019-10-11 10:56:31 发布

阅读量871

点赞数

本文链接：https://blog.csdn.net/qq_41673194/article/details/79767530

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script>
			var app = angular.module("myApp", []);
			app.controller("myctr", function($scope) {
				i = 0;
				//定义城市
				$scope.pros = [{
					pro: "北京",
					children: ["西二旗", "上地"]
				}, {
					pro: "河北",
					children: ["石家庄", "邯郸"]
				}];
				$scope.citys = $scope.pros[0].children;
				$scope.changecity = function(pro) {
					$scope.citys = pro.children;
				}
				$scope.stu = [{
					name: "张三",
					sex: "男",
					rq: new Date("2017-9-" + (i + 1)),
					zhuzhi: "北京西二旗"
				}];

				//添加
				$scope.add = function() {
					$scope.stu.push({
						name: $scope.n,
						sex: $scope.sex,
						rq: $scope.r,
						zhuzhi: $scope.s1.pro + $scope.s2
					})
				}
				//批量删除
				$scope.del = function() {
					//遍历数组
					for(var i = 0; i < $scope.stu.length; i++) {
						if($scope.stu[i].ck) {
							$scope.stu.splice(i, 1);
							i--;
						}
					}
				}

				//全选
				$scope.All = function() {
					for(var i = 0; i < $scope.stu.length; i++) {
						$scope.stu[i].ck = $scope.flag;
					}
				}
				//删除
				$scope.sc = function(i) {
					$scope.stu.splice(i, 1);
				}
			})
		</script>
	</head>

	<body ng-app="myApp" ng-controller="myctr">
		姓名:<input type="text" placeholder="请输入姓名" ng-model="n" /> 
		性别:
		<select ng-model="sex">
			<option>男</option>
			<option>女</option>
		</select>
		生日:<input type="date" ng-model="r" />
		<!--默认选中北京 -->
		住址：
		<select ng-init="s1=pros[0]" ng-model="s1" ng-options="p.pro for p in pros" ng-change="changecity(s1)">
			<option value="">--请选择省份--</option>
		</select>
		市：
		<select ng-init="s2=citys[0]" ng-model="s2" ng-options="c for c in citys">
			<option value="">--请选择城市--</option> 
		</select>
		<button style="background: lawngreen;" ng-click="add()">添加</button><br>
		<button styng-click="All()" style="background: yellow;">全选/反选</button>
		<button style="background-color: chartreuse ;" ng-click="del()">批量删除</button>
		<br>
		<table border="1px">
			<tr>
				<td><input type="checkbox" ng-model="flag" ng-click="All()" /></td>
				<td>姓名</td>
				<td>性别</td>
				<td>生日</td>
				<td>住址</td>
				<td>操作</td>
			</tr>
			<tr ng-repeat=" s in stu">
				<td><input type="checkbox" ng-model="s.ck" /></td>
				<td>{{s.name}}</td>
				<td>{{s.sex}}</td>
				<td>{{s.rq | date:'MM-dd hh:mm'}}</td>
				<td>{{s.zhuzhi}}</td>
				<td><button ng-click="sc($index)">删除</button></td>
			</tr>
		</table>
	</body>
</html>

梵韵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二级联动(angular实现)

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="../js/angular.min.js"
复制链接

扫一扫