重要4-CSDN博客

本文链接：https://blog.csdn.net/xiaozi_01anfen/article/details/79102687

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="jss/angular.min.js"></script>
<style>
label {
display: block;
}

span {
color: red;
}
</style>
<script>
angular.module("xubingyang", []).controller("con1", function($scope, $http) {
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(d) {
$scope.data = d.data;
})

$scope.getAge = function(bir) {
var b = new Date(bir).getYear();
var nowb = new Date().getYear();
return nowb - b;
}
$scope.ckall = function() {
for(var i = 0; i < $scope.data.length; i++) {
$scope.data[i].ck = $scope.ck1;
}
}
$scope.tableshow = false;
$scope.del = function(id) {
var index = 0;
for(var i = 0; i < $scope.data.length; i++) {
if($scope.data[i].id == id) {
index = i;
}
}
if(confirm("是否删除")) {
$scope.data.splice(index, 1);
}
}
$scope.sexs = "男"
$scope.dele = function() {
var deles = 0;
for(var i = 0; i < $scope.data.length; i++) {
if($scope.data[i].ck == true) {
deles++;
$scope.data.splice(i, 1);
i--;
}
}
if(deles == 0) {
alert("请选择");
}
if($scope.data.length == 0) {
alert("购物车为空");
}
}

$scope.baocun = function() {
$scope.err = [];
var names = $scope.names;
var sexs = $scope.sexs;
var salarys = $scope.salarys;
var bumens = $scope.bumens;
var birthdays = $scope.birthdays;
if(names == "" || names == undefined) {
$scope.t_names = true;
$scope.err.push(1);
} else {
$scope.t_names = false;
}
if(salarys == "" || salarys == undefined) {
$scope.t_salarys = true;
$scope.err.push(1);
} else {
$scope.t_salarys = false;
}
if(birthdays == "" || birthdays == undefined) {
$scope.t_birthdays = true;
$scope.err.push(1);
} else {
$scope.t_birthdays = false;
}
var reg_ = /米/g;
var sname = $scope.names.replace(reg_, "*");
$scope.name = sname;
var obj_bumen;
if($scope.bumens == "" || $scope.bumens == undefined) {
$scope.err.push(4);
} else {

if($scope.bumens == "市场部") {
obj_bumen = {
id: 1,
name: $scope.bumens
};
} else if($scope.bumens == "研发部") {
obj_bumen = {
id: 2,
name: $scope.bumens
};
}
}
if($scope.err.length == 0) {
$scope.data.push(

{
"salary": $scope.salarys,
"birthday": $scope.birthdays,
"department": obj_bumen,
"gender": $scope.sexs,
"id": $scope.data.length + 100,
"name": $scope.names
}

)
$scope.tashow=false;
}

}
$scope.bumen =function(sname){
if($scope.salname==""||$scope.salname==undefined){
return true;
}
if(sname.indexOf($scope.salname)>-1){
return true;
}
return false;
}
})
</script>
</head>

<body ng-app="xubingyang" ng-controller="con1">
<button ng-click="tashow=true">新增</button>
<button ng-click="dele()">批量</button>
<input type="text" placeholder="关键字" ng-model="salname" />
<h2 ng-show="data.length==0">购物车为空</h2>
<div ng-show="data.length!=0">
<table border="1">
<tr>
<td>
<input type="checkbox" ng-model="ck1" ng-click="ckall()" />
</td>
</tr>
<tr ng-repeat="s in data|orderBy:'+birthday'" ng-show="bumen(s.department.name)">
<td>
<input type="checkbox" ng-model="s.ck" />
</td>
<td>{{s.id}}</td>
<td><span ng-hide="f">
{{s.name}}
</span>
<span ng-show="f">
<input style="width: 50px;" ng-model="s.name" />
</span></td>
<td>{{getAge(s.birthday)}}</td>
<td>{{s.gender}}</td>
<td>{{s.salary}}</td>
<td>{{s.department.name}}</td>
<td>{{s.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td><button ng-click="del(s.id)">删除</button>
<button ng-click="f=!f">修改</button>
</td>
</tr>
</table>
</div>
<div ng-show="tashow">
<label>

用户名: <input type="text" placeholder="用户名" ng-model="names" /><span ng-show="t_names">用户名不合法</span>

</label>
<label>

性别: <input type="radio" ng-model="sexs" value="男"/>男
<input type="radio" value="女" ng-model="sexs" />女
</label>
<label>

工资: <input type="text" placeholder="工资" ng-model="salarys" /><span ng-show="t_salarys">工资不合法</span>

</label>
<label>

部门: <select ng-model="bumens">
<option value="">请输入</option>
<option>市场部</option>
<option>研发部</option>
</select>

</label>
<label>
<input type="date" ng-model="birthdays" /><span ng-show="t_birthdays">生日不能为空</span>
</label>
<button ng-click="baocun()">保存</button>
</div>
</body>

</html>