csnd

<body ng-app="myapp" ng-controller="myctr"><center>
<input type="text" placeholder="根据姓名模糊查询" ng-model="qbn"/><input type="text" placeholder="根据部门模糊查询" ng-model="qbd"/>
<select ng-model="ob">
<option value="money">根据薪资排序</option>
<option value="birthday">根据生日排序</option>
</select>
<button ng-click="ckOther()">反选</button>
<button ng-click="delMore()">批量删除</button>
<table border="1" cellspacing="0" >
<tr>
<th><input type="checkbox" ng-click="ckAll()" /></th>
<th>员工名称</th>
<th>员工年龄</th>
<th>员工性别</th>
<th>员工薪资</th>
<th>出生日期</th>
<th>部门名称</th>
<th>删除</th>
</tr>
<tr ng-repeat="x in employees|filter:{name:qbn,department:qbd}|orderBy:ob" class="{{$index%2?'ds':'ss'}}">
<td><input type="checkbox" ng-model="x.ck"/></td>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.sex}}</td>
<td>{{x.money|currency:"¥"}}</td>
<td>{{x.birthday|date:"yyyy-MM-dd"}}</td>
<td>{{x.department}}</td>
<td><button ng-click="del(x.name)">删除</button></td>
</tr>
</table>
<button ng-click="addem()">添加</button>
<fieldset ng-show="isShow">
<legend>添加模块</legend>
<ul>
<li>员工姓名:<input id="name"/></li>
<li>员工年龄:<input id="age"/></li>
<li>员工性别:<input type="radio" name="sex" class="sex" value="男" />男
<input type="radio" name="sex" class="sex" value="女" />女
</li>
<li>员工工资:<input id="money"/></li>
<li>出生生日:<input type="date" id="birthday" /></li>
<li>员工部门:<select id="department">
<option value="市场部">市场部</option>
<option value="研发部">研发部</option>
</select>

</li>
<li><button ng-click="addEm()">添加</button></li>
</ul>
</fieldset>
</center>
</body>
<script>
var app=angular.module("myapp",[]);
//初始化数据
app.controller("myctr",function($scope,$http){

$scope.employees=[
  {name:"张三",age:26,sex:"女",money:24000,birthday:"1993-12-15",department:"研发部"},
{name:"李四",age:25,sex:"男",money:32000,birthday:"1994-07-04",department:"技术部"},
{name:"王五",age:29,sex:"男",money:15000,birthday:"1994-10-28",department:"市场部"},
{name:"赵六",age:20,sex:"女",money:24000,birthday:"1998-01-28",department:"研发部"}];
//删除
$scope.del=function(na){
if (confirm("确定要删出吗?")) {
for (var i = 0; i <$scope.employees.length; i++) {
if ($scope.employees[i].name==na) {
$scope.employees.splice(i,1);
break;
}
}
}
}
//全选,反选,批量删除
$scope.ckAll=function(){
for (var i = 0; i < $scope.employees.length; i++) {
$scope.employees[i].ck=true;
}
}
$scope.ckOther=function(){
for (var i = 0; i < $scope.employees.length; i++) {
$scope.employees[i].ck=!$scope.employees[i].ck;
}
}
$scope.delMore=function(){
if (confirm("确定删除吗?")) {
for (var i = 0; i < $scope.employees.length; i++) {
if ($scope.employees[i].ck) {
$scope.employees.splice([i],1);
i--;
}
}
}
}
//添加
$scope.isShow=false;
$scope.addem=function(){
$scope.isShow=true;
}
$scope.addEm=function(){
var newEm={};
var name=$("#name").val();
var age=$("#age").val();
var sex=$(".sex:checked").val();
var money=$("#money").val();
var birthday=$("#birthday").val();
var department=$("#department").val();
newEm.name=name;
newEm.age=age;
newEm.sex=sex;
newEm.money=money;
newEm.birthday=birthday;
newEm.department=department;
$scope.employees.push(newEm);
$scope.isShow=false;
}

});

猜你喜欢

转载自blog.csdn.net/Lsnzf3134/article/details/80514531