<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1 引入angular包 shift+ctrl+/-->
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<style>
ul li {
background: deeppink;
}
tr:nth-child(2n+1) {
background: gainsboro;
}
tr:nth-child(2n) {
background: red;
}
</style>
<script>
/**/
var app = angular.module("gaoynapp", []);
/*contoller本质就是函数 */
/*控制器:创建数据,定义行为函数来操纵数据 */
app.controller("demo1", function($scope) {
/* 给下拉列表框 ng-molde='sex'*/
$scope.datas = [{
name: '张三',
sex: '男',
birth: new Date('1995-04-24'),
addres: '北京-西二旗'
},
{
name: '李四',
sex: '男',
birth: new Date('1995-05-24'),
addres: '北京-西二旗'
},
{
name: '王三',
sex: '男',
birth: new Date('1995-04-24'),
addres: '北京-西二旗'
}
];
/*删除 i就是删除者调用的时候给的标记 */
$scope.del = function(i) {
var b = confirm("是否删除!");
/*如果选中确定,执行删除 */
if(b) {
$scope.datas.splice(i, 1);
}
}
/*添加的业务逻辑 */
$scope.save = function() {
var v_name = $scope.uname;
var sex = $scope.sex;
var birth = $scope.birth;
var address = $scope.pro + "-" + $scope.citys;
$scope.errors = []; /*存放错误信息的数组 */
if(v_name == undefined || v_name.length < 3 || v_name.length > 30) {
$scope.errors.push("用户名不合法");
}
if(sex == undefined) {
$scope.errors.push("性别不能为空");
}
if($scope.errors.length == 0) {
$scope.datas.push({
name: v_name,
sex: sex,
birth: birth,
addres: address
});
}
}
/* */
$scope.qx = function() {
var f = $scope.ld;
for(var i in $scope.datas) {
$scope.datas[i].ck = f;
}
}
/*批量删除 */
/*张三 李四 王三 */
$scope.delAll = function() {
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].ck) {
$scope.datas.splice(i, 1);
i--;
}
}
}
})
</script>
</head>
<!--1 创建空的$scope -->
<body ng-app="gaoynapp" ng-controller="demo1">
<button ng-click="delAll()">批量删除</button>
<form>
姓名:<input ng-model="uname" /> 性别:
<select ng-init="sex='男'" ng-model="sex">
<option>男</option>
<option>女</option>
</select>
生日:<input type="date" ng-model="birth" /> 住址:
<select id="pro" ng-init="pro='北京'" ng-model="pro" οnchange="getcitys()">
<option value="">--请选择省份--</option>
<option>北京</option>
<option>河北</option>
<option>河南</option>
</select>
城市:
<select id="city" ng-model="citys" ng-init="citys='昌平'">
<option value="">--请选择城市--</option>
<option>海淀</option>
<option>昌平</option>
</select>
<button ng-click="save()">保存</button>
</form>
<!-- 错误信息 -->
<div>
<ul>
<li ng-repeat="e in errors">{{e}}</li>
</ul>
</div>
<table border="1px">
<tr>
<td><input type="checkbox" ng-model="ld" ng-click="qx()" /></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
<tr ng-repeat="n in datas">
<td><input type="checkbox" ng-model="n.ck" /></td>
<td>{{n.name}}</td>
<td>{{n.sex}}</td>
<td>{{n.birth|date:"yyyy-MM-dd日 hh:mm:ss"}}</td>
<td>{{n.addres}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
</table>
</body>
<!-- 通过jQuery代码实现二级联动 -->
<script>
/*数组 */
var datas = [{
pro: "北京",
citys: ["海淀", "昌平"]
}, {
pro: "河北",
citys: ["石家庄", "张家口"]
}, {
pro: "河南",
citys: ["安阳", "濮阳"]
}];
function getcitys() {
//把之前的城市数据清空
$("#city option").remove();
var datas_citys = []; //存放选择省份对应的城市
//获取当前选择的省份
var p = $("#pro").val(); /*p的值是下拉列表框选择的城市 */
for(var i in datas) {
if(datas[i].pro == p) {
datas_citys = datas[i].citys;
break; /*跳出循环,节省效率 */
}
}
//根据datas_citys数组的内容
/*2 把城市封装到option 把option添加到城市的select */
for(var i in datas_citys) {
var op = $("<option>" + datas_citys[i] + "</option>")
$("#city").append(op);
}
}
</script>
</html>
二级联动(jQuery实现)
最新推荐文章于 2024-05-31 10:47:24 发布