angularjs 公司表单

来源：互联网发布：小说网站源码带手机版编辑：程序博客网时间：2024/05/17 20:25

<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<style>
.btu:hover {
cursor: pointer;
}

.option:hover {
background: yellow;
color: white;
}

table tbody tr:nth-child(2n) {
background-color: saddlebrown;
}
</style>

<script>
angular.module("myapp", [])
.controller("de", function($scope,$filter) {
$scope.datas = [{
'id': 1,
'name': '张三',
'age': '40',
'pinyin': 'zhangsan',
'zhiwei': '总经理'
},
{
'id': 2,
'name': '李四',
'age': '33',
'pinyin': 'lisi',
'zhiwei': '设计师'
},
{
'id': 3,
'name': '周期',
'age': '38',
'pinyin': 'zhouqi',
'zhiwei': '设计师'
},
{
'id': 4,
'name': '王五',
'age': '27',
'pinyin': 'wangwu',
'zhiwei': '工程师'
},
{
'id': 5,
'name': '赵六',
'age': '36',
'pinyin': 'zhaoliu',
'zhiwei': '人事经理'
}
]
$scope.isshow = false;
//删除
$scope.del = function(id) {
for(var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].id == id) {
if(confirm("确定删除：" + $scope.datas[i].name)) {
alert($scope.datas[i].name + "用户已删除！");
$scope.datas.splice(i, 1);
}

}
}
}
$scope.addid=5;
$scope.addname = "";
$scope.addage = "";
$scope.addpinyin = "";
$scope.addzhiwei = "";
//添加用户
$scope.adddata = function() {
$scope.isshow = true;

}
$scope.ti = function() {

if(isNaN(parseInt($scope.addage))) {
alert("年龄格式不对！");
} else {

$scope.datas.push({
id: $scope.addid,
name: $scope.addname,
age: $scope.addage,
pinyin: $scope.addpinyin,
zhiwei: $scope.addzhiwei
});
$scope.isshow = false;
}
}
/*var goods=[];
var goods=$scope.datas;
$scope.xm="";
$scope.dian=function(){
if ($scope.xm==""){
alert("请输入姓名");
}
else if ($scope.xm.indexOf("杨")>=0){
alert("敏感词汇");
}
else{

$f=$filter("filter");
$scope.datas=$f(goods,{
"name":$scope.xm
});
if ($scope.datas.length<=0){
alert("没有数据");
}

} */

var goods=$scope.datas;
$scope.selname="";
$scope.select=function(){
if ($scope.selname==""){
alert("请输入姓名");
}
else if ($scope.selname.indexOf("杨")>=0){
alert("敏感词汇");
}

$f=$filter("filter");
$scope.datas=$f(goods,{
"name":$scope.selname
});
if ($scope.datas.length<=0){
alert("没有数据");
}

}
})
</script>
</head>

<body ng-app="myapp" ng-controller="de">
<center>
姓名查找条件<input type="text" ng-model="selname" />
<select ng-model="pai">
<option value="">排序</option>
<option value="age">按年龄正序排序</option>
<option value="-age">按年龄倒序排序</option>
</select>
<br />
<table border="1px" style=" width: 600px; align-content: center;">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="option" ng-repeat="d in datas|orderBy:pai">
<th>{{d.name}}</th>
<th>{{d.age}}</th>
<th>{{d.pinyin}}</th>
<th>{{d.zhiwei}}</th>
<th>
<button class="btu" ng-click="del(d.id)">删除</button>
</th>
</tr>
</tbody>
</table>
<br />
<button style="width: 100px; height: 40px;" ng-click="select()">查询</button>
<button style="width: 100px; height: 40px;" ng-click="adddata()">添加用户</button>
<br />
<br />
<div ng-show="isshow">
姓名:<input ng-model="addname" /><br /> 年龄:
<input ng-model="addage" /><br /> 拼音:
<input ng-model="addpinyin" /><br /> 职位:
<input ng-model="addzhiwei" /><br />
<button ng-click="ti()">保存</button>
</div>
</center>
</body>

</html>

阅读全文

0 0