<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/jquery-1.11.0.min.js"></script>
<style>
.yel{
background: red;
}
.jr{
background: tomato;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" ng-model="mh" placeholder="输入关键字" />
<select ng-model="ord">
<option value="rq">正序</option>
<option value="-rq">倒序</option>
</select>
<input type="button" value="入库" ng-click="showapp=!showapp" />
<div ng-show="showapp">
<input type="text" placeholder="输入名字" ng-model="name" />
<span ng-show="na">名字不对</span><br />
<select ng-model="sex">
<option>男</option>
<option>女</option>
</select><br />
日期:<input type="date" ng-model="rq" /><br />
城市:<select ng-init="cheng=p[0]" ng-model="cheng" ng-options="p.pro for p in pros" ng-change="gai(cheng)">
<option>请选择</option>
</select><br />
县:<select ng-init="shi=p" ng-model="shi" ng-options=" p for p in citys">
<option>请选择</option>
</select>
<input type="button" value="提交" ng-click="tj()" />
</div>
<table border="1">
<tr>
<td><input type="checkbox" ng-model="checkall"/></td>
<td>用户</td>
<td>性别</td>
<td>日期</td>
<td>住址</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in names | filter:mh |orderBy:ord" class="{{$index%2?'yel':'jr'}}">
<td><input type="checkbox" ng-model="checkall" value="{{$index}}" /></td>
<td>{{x.name}}</td>
<td>{{x.sex}}</td>
<td>{{x.rq}}</td>
<td>{{x.zhuzhi}}</td>
<td><input type="button" value="删除" ng-click="sc(x.name)"/></td>
</tr>
</table>
<input type="button" ng-click="pl()" value="批量删除" />
<script>
angular.module("myapp",[]).controller("myctrl",function($scope,$http){
$http.get("mydata.json").then(function(response){
$scope.names=response.data;
})
$scope.na=false;
$scope.pros=[{pro:"北京",childer:["西二旗","朝阳"]},{pro:"河北省",childer:["石家庄","邯郸"]}];
$scope.citys=$scope.pros[0].childer;
$scope.gai=function(s){
$scope.citys=s.childer;
}
$scope.tj=function(){
var name=$scope.name;
var sex=$scope.sex;
var rq=$scope.rq;
var zhuzhi=$scope.cheng.pro+$scope.shi;
if (name==null || name.length<3 || name.length>30 ) {
$scope.na=true;
return;
} else {
$scope.na=false;
$scope.names.push({name:name,sex:sex,rq:rq,zhuzhi:zhuzhi});
}
}
$scope.sc=function(id){
$scope.names.splice(id,1);
}
$scope.pl=function(){
if($scope.checkall){
$scope.names=[];
}else{
var check=$("input[type=checkbox]:checked");
for (var i = check.length-1; i >=0; i--) {
$scope.names.splice(check[i].value,1);
}
}
}
})
</script>
</body>
</html>
混合开发之二级联动
最新推荐文章于 2024-07-12 20:27:34 发布