<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>
var App = angular.module("App",[]);
App.controller("MyCrte",function($scope){
$scope.list = [
{"id":1,"name":"张三","age":21,"sex":"男","dian":18611111111,"hobby":"挚爱学习"},
{"id":2,"name":"小花","age":19,"sex":"女","dian":18633333333,"hobby":"听着歌学习"},
{"id":3,"name":"翠花","age":18,"sex":"女","dian":18644444444,"hobby":"看书学习"}
]
//写添加的方法
$scope.add = function(){
var name = $scope.names;
var age = parseInt($scope.age);
var sex = $scope.sex;
var dian = parseInt($scope.dian);
var hobby = $scope.hobby;
if(name != null && age != 0 && sex != null && dian != null && hobby != null){
//添加如集合中
alert("数据不能出现空数据");
}
}
//删除的方法
$scope.remove = function(index){
if(confirm("是否确定删除?")){
$scope.list.splice(index,1);
}
}
//定义一个排序需要用到的变量
$scope.order = "";
});
$(function(){
$("#add").click(function(){
$("#div").toggle(1000);
})
})
</script>
<style>
.css1{
background: #fff;
}
.css2{
background: deepskyblue;
}
</style>
</head>
<body ng-controller="MyCrte">
<center>
<div style="width: 70%;margin-top: 20px;">
年龄排序:<select ng-model="order">
<option>请选择</option>
<option value="age">正序</option>
<option value="-age">倒序</option>
</select>
id排序:<select ng-model="order">
<option>请选择</option>
<option value="id">正序</option>
<option value="-id">倒序</option>
</select>
姓名：<input type="text" ng-model="name" />
<input type="button" value="按照姓名查询" ng-click="namecha()"/>
<input type="button" value="添加新用户" id="add"/>
</div>
<table style="width: 60%;margin-top: 20px;" border="1 solid blue" cellpadding="1" cellspacing="0" >
<tr align="center">
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>联系方式</td>
<td>爱好</td>
<td>操作</td>
</tr>
<tr align="center" ng-repeat="li in list|filter:name|orderBy:order" class="{{$even? 'css1':'css2'}}">
<td>{{li.id}}</td>
<td>{{li.name}}</td>
<td>{{li.age}}</td>
<td>{{li.sex}}</td>
<td>{{li.dian}}</td>
<td>{{li.hobby}}</td>
<td><a style="color: red;" href="#" ng-click="remove($index)">删除</a></td>
</tr>
</table>
<div style="margin-top: 20px;" hidden="hidden" id="div">
<form ng-submit="" style="width: 30%;margin-bottom: 10px;">
<fieldset>
<legend>添加用户</legend>
<label>
<table >
<tr>
<td>姓名</td>
<td><input type="text" ng-model="names"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" ng-model="age"/></td>
</tr>
<tr>
<td>性别</td>
<td>
<select ng-model="sex">
<option>请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td>联系方式:</td>
<td><input type="text" ng-model="dian"/></td>
</tr>
<tr>
<td>爱好</td>
<td>
<textarea rows="3" cols="20" ng-model="hobby">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input style="width: 20%;" type="button" value="添加" ng-click="add()"/></td>
</tr>
</table>
</label>
</fieldset>
</form>
</div>
</center>
</body>
</html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>
var App = angular.module("App",[]);
App.controller("MyCrte",function($scope){
$scope.list = [
{"id":1,"name":"张三","age":21,"sex":"男","dian":18611111111,"hobby":"挚爱学习"},
{"id":2,"name":"小花","age":19,"sex":"女","dian":18633333333,"hobby":"听着歌学习"},
{"id":3,"name":"翠花","age":18,"sex":"女","dian":18644444444,"hobby":"看书学习"}
]
//写添加的方法
$scope.add = function(){
var name = $scope.names;
var age = parseInt($scope.age);
var sex = $scope.sex;
var dian = parseInt($scope.dian);
var hobby = $scope.hobby;
if(name != null && age != 0 && sex != null && dian != null && hobby != null){
//添加如集合中
$scope.list.push({"id":$scope.list.length+1,"name":name,"age":age,"sex":sex,"dian":dian,"hobby":hobby});
//赋值为空
$scope.names=$scope.age=$scope.sex=$scope.dian=$scope.hobby = null;
alert("数据不能出现空数据");
}
}
//删除的方法
$scope.remove = function(index){
if(confirm("是否确定删除?")){
$scope.list.splice(index,1);
}
}
//定义一个排序需要用到的变量
$scope.order = "";
});
$(function(){
$("#add").click(function(){
$("#div").toggle(1000);
})
})
</script>
<style>
.css1{
background: #fff;
}
.css2{
background: deepskyblue;
}
</style>
</head>
<body ng-controller="MyCrte">
<center>
<div style="width: 70%;margin-top: 20px;">
年龄排序:<select ng-model="order">
<option>请选择</option>
<option value="age">正序</option>
<option value="-age">倒序</option>
</select>
id排序:<select ng-model="order">
<option>请选择</option>
<option value="id">正序</option>
<option value="-id">倒序</option>
</select>
姓名：<input type="text" ng-model="name" />
<input type="button" value="按照姓名查询" ng-click="namecha()"/>
<input type="button" value="添加新用户" id="add"/>
</div>
<table style="width: 60%;margin-top: 20px;" border="1 solid blue" cellpadding="1" cellspacing="0" >
<tr align="center">
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>联系方式</td>
<td>爱好</td>
<td>操作</td>
</tr>
<tr align="center" ng-repeat="li in list|filter:name|orderBy:order" class="{{$even? 'css1':'css2'}}">
<td>{{li.id}}</td>
<td>{{li.name}}</td>
<td>{{li.age}}</td>
<td>{{li.sex}}</td>
<td>{{li.dian}}</td>
<td>{{li.hobby}}</td>
<td><a style="color: red;" href="#" ng-click="remove($index)">删除</a></td>
</tr>
</table>
<div style="margin-top: 20px;" hidden="hidden" id="div">
<form ng-submit="" style="width: 30%;margin-bottom: 10px;">
<fieldset>
<legend>添加用户</legend>
<label>
<table >
<tr>
<td>姓名</td>
<td><input type="text" ng-model="names"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" ng-model="age"/></td>
</tr>
<tr>
<td>性别</td>
<td>
<select ng-model="sex">
<option>请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
</tr>
<tr>
<td>联系方式:</td>
<td><input type="text" ng-model="dian"/></td>
</tr>
<tr>
<td>爱好</td>
<td>
<textarea rows="3" cols="20" ng-model="hobby">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input style="width: 20%;" type="button" value="添加" ng-click="add()"/></td>
</tr>
</table>
</label>
</fieldset>
</form>
</div>
</center>
</body>
</html>
3749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
