<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
color: red;
}
</style>
</head>
<script src="js/angular.min.js"></script>
<script>
angular.module("list",[]).controller("con",function($scope){
$scope.datas=[{id:1,name:"曹操",password:"123456",level:"1",address:"北京-海淀",birthday:new Date('2017-10-01 10:00:00')},
{id:1,name:"刘备",password:"123456",level:"1",address:"河北-石家庄",birthday:new Date('2017-10-03 10:00:00')},
{id:1,name:"司马懿",password:"123456",level:"2",address:"河北-承德",birthday:new Date('2017-10-04 10:00:00')},
{id:1,name:"孙权",password:"123456",level:"2",address:"北京-邯郸",birthday:new Date('2017-10-02 10:00:00')}];
$scope.delAll=function(){
for (var i=0;i<$scope.datas.length;i++) {
if ($scope.datas[i].ck) {
$scope.datas.splice(i,1);i--;
}
}
}
$scope.add=function(){
var id=$scope.id;
var name=$scope.name;
var password=$scope.password;
var level=$scope.level;
var address=$scope.address+"-"+$scope.city;
var birthday=$scope.birthday;
if($scope.id==""||$scope.id==null){
$scope.i=true;
}
if($scope.name==""||$scope.name==null){
$scope.n=true;
}
if($scope.password==""||$scope.password==null){
$scope.p=true;
}
if($scope.level==""||$scope.level==null){
$scope.l=true;
}
if($scope.birthday==""||$scope.birthday==null){
$scope.b=true;
}else{
$scope.i=false;
$scope.n=false;
$scope.p=false;
$scope.l=false;
$scope.ass=false;
$scope.birthday=new Date();
$scope.datas.push({id:id,name:name,password:password,level:level,address:address,birthday:birthday});
$scope.a=false;
}
}
$scope.qx=function(){
for (var i in $scope.datas) {
$scope.datas[i].ck=$scope.id;
}
}
$scope.sel=function(){
$scope.text=$scope.text1;
$scope.ji=$scope.ji1;
}
})
</script>
<body ng-app="list" ng-controller="con">
{{datas}}
<center>
<input type="text" ng-model="text" placeholder="用户名搜索" />
<select ng-model="ji">
<option value="">选择级别</option>
<option>1</option>
<option>2</option>
</select>
<br />
<input type="button" value="新增用户" ng-click="a=true"/>
<input type="button" ng-click="delAll()" value="批量删除" />
<select ng-model="px">
<option value="">--请选择排序--</option>
<option value="+id">编号正序排序</option>
<option value="-id">编号倒序排序</option>
<option value="+level">级别正序排序</option>
<option value="-level">级别倒序排序</option>
</select>
<table border="1" cellspacing="0" width="700">
<tr>
<th><input type="checkbox" ng-click="qx()" ng-model="id"></th>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
<th>级别</th>
<th>地址</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr ng-repeat="i in datas | filter:{name:text,level:ji} | orderBy:px">
<th><input type="checkbox" ng-model="i.ck"></th>
<th>{{i.id}}</th>
<th>{{i.name}}<input ng-model="i.name" ng-show="f" ng-blur="f=false"></th>
<th>{{i.password}}</th>
<th>{{i.level}}</th>
<th>{{i.address}}</th>
<th>{{i.birthday | date:"yyyy-MM-dd hh:mm:ss"}}</th>
<th><button ng-click="f=true">修改</button></th>
</tr>
</table>
<form ng-show="a">
编号<input type="text" ng-model="id" /><span ng-show="i">*id不能为空</span><br />
用户名<input type="text" ng-model="name" /><span ng-show="n">*用户名不能为空</span><br />
密码<input type="text" ng-model="password" /><span ng-show="p">*密码不能为空</span><br />
级别<select ng-model="level">
<option value="">--请选择级别--</option>
<option>1</option><option>2</option>
</select><span ng-show="l">*级别不能为空</span><br />
地址<select id="sheng" ng-model="address" οnchange="dj()">
<option value="">--请选择省份--</option>
<option>北京</option>
<option>河北</option>
</select>
市<select id="shi" ng-model="city">
<option value="">--请选择城市--</option>
</select>
日期<input type="date" ng-model="birthday" /><span ng-show="b">*日期不能为空</span><br />
<input type="submit" value="保存添加" ng-click="add()" />
</form>
</center>
</body>
<script src="js/jquery-1.11.1.js"></script>
<script>
function dj(){
var citys=[{sheng:"北京",si:["海淀","昌平"]},{sheng:"河北",si:["石家庄","承德","邯郸"]}];
var ids=$("#sheng").val();
var k=[];
for (var i=0;i<citys.length;i++) {
if(ids==citys[i].sheng){
k=citys[i].si;
}
}
$("#shi option").remove();
for(var i=0;i<k.length;i++){
var op=$("<option>"+k[i]+"</option>");
$("#shi").append(op);
}
}
</script>
</html>