<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../day0403/js/angular.min.js" ></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
angular.module("list",[]).controller("demo1",function($scope){
$scope.datas=[{id:'1',name:'曹操',password:'123456',jibie:'3',address:'北京-海淀',time:'2017-10-01 10:00:00'},{id:'2',name:'刘备',password:'123456',jibie:'1',address:'河北-石家庄',time:'2017-10-03 10:00:00'},{id:'3',name:'司马懿',password:'123456',jibie:'1',address:'河北-承德',time:'2017-10-02 10:00:00'}];
//批量删除
$scope.delAll=function(){
for(var i=0;i<$scope.datas.length;i++){
if ($scope.datas[i].c){
$scope.datas.splice(i,1);
i--;
}
}
}
$scope.xz=function(){
//alert("-");
var id=$scope.id;
var name=$scope.name;
var password=$scope.password;
var jibie=$scope.jibie;
var sheng=$scope.sheng;
var shi=$scope.shi;
var time=new Date();
//alert(id);
if(id==null||id==""){
alert("id不能为空");
}else if(name==null||name==""){
alert("name不能为空");
}else if(password==null||password==""){
alert("password不能为空");
}else if(jibie==null||jibie==""){
alert("jb不能为空");
}else{
$scope.datas.push(
{id:id,name:name,password:password,jibie:jibie,address:sheng+"-"+shi,time:time}
);
}
}
$scope.sel=function(){
$scope.sname1=$scope.sname;
$scope.stel1=$scope.stel;
$scope.ss1=$scope.ss;
}
$scope.qx=function(){
//全选
for(var i=0;i<$scope.datas.length;i++){
$scope.datas[i].c=$scope.ck;
}
}
})
</script>
<style>
tr:nth-child(2n+1){
background: pink;
}
tr:nth-child(2n){
background: #00BFFF;
}
.myborder{
border: 1px solid red;
}
</style>
</head>
<body ng-app="list" ng-controller="demo1">
<input ng-model="name1" placeholder="用户名搜索"/>
<select ng-model="jibie1" >
<option value="">选择级别</option>
<option>1</option>
<option>2</option>
</select>
<select ng-model="px" >
<option value="">排序</option>
<option value="+id">id正序排列</option>
<option value="-id">id倒序排列</option>
<option value="+jibie">级别正序</option>
<option value="-jibie">级别倒序</option>
<option value="+time">时间正序</option>
<option value="-time">时间倒序</option>
</select>
<button ng-click="xzshow=true">新增用户</button>
<button ng-click="delAll()">批量删除</button>
<table border="1px">
<tr>
<td><input type="checkbox" ng-model="ck" ng-click="qx()"></td>
<td>id</td>
<td>用户名</td>
<td>密码</td>
<td>级别</td>
<td>地址</td>
<td>时间</td>
<td>操作</td>
</tr>
<tr ng-repeat="d in datas|filter:{name:name1,jibie:jibie1}|orderBy:px"">
<td><input type="checkbox" ng-model="d.c"/></td>
<td>{{d.id}}</td>
<td>{{d.name}}</td>
<td><span ng-hide="isshow">{{d.password}}</span><input ng-model="d.password" ng-show="isshow" ng-blur="isshow=false"></td>
<td>{{d.jibie}}</td>
<td>{{d.address}}</td>
<td>{{d.time|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>
<button ng-click="isshow=true">修改密码</button>
</td>
</tr>
</table>
<form ng-show="xzshow">
ID:<input ng-model="id" ng-class="{myborder:id==null||id==''}"/>{{srrors.id}}<br />
用户名:<input ng-model="name" ng-class="{myborder:name==null||name==''}" />{{errors.name}}<br />
密码:<input ng-model="password" /><br />
级别:<input ng-model="jibie" /><br />
时间:<input ng-model="time" /><br />
省份:
<select ng-model="sheng" id="sheng1" οnchange="getCity()">
<option>北京</option>
<option>河北</option>
<option>河北</option>
</select>
<br />
城市:<select ng-model="shi" id="shi1"></select>
<br />
<button ng-click="xz()">新增</button>
</form>
<script>
var shengs=[
{sheng:"河南",shi:["安阳","洛阳","信阳"]},
{sheng:"北京",shi:["朝阳","昌平","海淀"]},
{sheng:"河北",shi:["石家庄","邯郸","承德"]}
];
var city=[];
function getCity(){
for(var i=0;i<shengs.length;i++){
var sheng1=$("#sheng1").val();
if(shengs[i].sheng==sheng1){
city=shengs[i].shi;
}
}
//alert(city);
$("#shi1 option").remove();
for(var i=0;i<city.length;i++){
var op=$("<option>"+city[i]+"</option>")
$("#shi1").append(op);
}
}
</script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../day0403/js/angular.min.js" ></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
angular.module("list",[]).controller("demo1",function($scope){
$scope.datas=[{id:'1',name:'曹操',password:'123456',jibie:'3',address:'北京-海淀',time:'2017-10-01 10:00:00'},{id:'2',name:'刘备',password:'123456',jibie:'1',address:'河北-石家庄',time:'2017-10-03 10:00:00'},{id:'3',name:'司马懿',password:'123456',jibie:'1',address:'河北-承德',time:'2017-10-02 10:00:00'}];
//批量删除
$scope.delAll=function(){
for(var i=0;i<$scope.datas.length;i++){
if ($scope.datas[i].c){
$scope.datas.splice(i,1);
i--;
}
}
}
$scope.xz=function(){
//alert("-");
var id=$scope.id;
var name=$scope.name;
var password=$scope.password;
var jibie=$scope.jibie;
var sheng=$scope.sheng;
var shi=$scope.shi;
var time=new Date();
//alert(id);
if(id==null||id==""){
alert("id不能为空");
}else if(name==null||name==""){
alert("name不能为空");
}else if(password==null||password==""){
alert("password不能为空");
}else if(jibie==null||jibie==""){
alert("jb不能为空");
}else{
$scope.datas.push(
{id:id,name:name,password:password,jibie:jibie,address:sheng+"-"+shi,time:time}
);
}
}
$scope.sel=function(){
$scope.sname1=$scope.sname;
$scope.stel1=$scope.stel;
$scope.ss1=$scope.ss;
}
$scope.qx=function(){
//全选
for(var i=0;i<$scope.datas.length;i++){
$scope.datas[i].c=$scope.ck;
}
}
})
</script>
<style>
tr:nth-child(2n+1){
background: pink;
}
tr:nth-child(2n){
background: #00BFFF;
}
.myborder{
border: 1px solid red;
}
</style>
</head>
<body ng-app="list" ng-controller="demo1">
<input ng-model="name1" placeholder="用户名搜索"/>
<select ng-model="jibie1" >
<option value="">选择级别</option>
<option>1</option>
<option>2</option>
</select>
<select ng-model="px" >
<option value="">排序</option>
<option value="+id">id正序排列</option>
<option value="-id">id倒序排列</option>
<option value="+jibie">级别正序</option>
<option value="-jibie">级别倒序</option>
<option value="+time">时间正序</option>
<option value="-time">时间倒序</option>
</select>
<button ng-click="xzshow=true">新增用户</button>
<button ng-click="delAll()">批量删除</button>
<table border="1px">
<tr>
<td><input type="checkbox" ng-model="ck" ng-click="qx()"></td>
<td>id</td>
<td>用户名</td>
<td>密码</td>
<td>级别</td>
<td>地址</td>
<td>时间</td>
<td>操作</td>
</tr>
<tr ng-repeat="d in datas|filter:{name:name1,jibie:jibie1}|orderBy:px"">
<td><input type="checkbox" ng-model="d.c"/></td>
<td>{{d.id}}</td>
<td>{{d.name}}</td>
<td><span ng-hide="isshow">{{d.password}}</span><input ng-model="d.password" ng-show="isshow" ng-blur="isshow=false"></td>
<td>{{d.jibie}}</td>
<td>{{d.address}}</td>
<td>{{d.time|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>
<button ng-click="isshow=true">修改密码</button>
</td>
</tr>
</table>
<form ng-show="xzshow">
ID:<input ng-model="id" ng-class="{myborder:id==null||id==''}"/>{{srrors.id}}<br />
用户名:<input ng-model="name" ng-class="{myborder:name==null||name==''}" />{{errors.name}}<br />
密码:<input ng-model="password" /><br />
级别:<input ng-model="jibie" /><br />
时间:<input ng-model="time" /><br />
省份:
<select ng-model="sheng" id="sheng1" οnchange="getCity()">
<option>北京</option>
<option>河北</option>
<option>河北</option>
</select>
<br />
城市:<select ng-model="shi" id="shi1"></select>
<br />
<button ng-click="xz()">新增</button>
</form>
<script>
var shengs=[
{sheng:"河南",shi:["安阳","洛阳","信阳"]},
{sheng:"北京",shi:["朝阳","昌平","海淀"]},
{sheng:"河北",shi:["石家庄","邯郸","承德"]}
];
var city=[];
function getCity(){
for(var i=0;i<shengs.length;i++){
var sheng1=$("#sheng1").val();
if(shengs[i].sheng==sheng1){
city=shengs[i].shi;
}
}
//alert(city);
$("#shi1 option").remove();
for(var i=0;i<city.length;i++){
var op=$("<option>"+city[i]+"</option>")
$("#shi1").append(op);
}
}
</script>
</body>
</html>
</html>