</style>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycr">
<div class="div">
姓名查询条件<input type="text" ng-model="mname"/>
<option ng-repeat="xx in myage">{{xx}}</option>
</select>
<br /><br />
用户列表<br><br />
<table border="1px" cellspacing="1" cellpadding="0" width="400px">
<tr align="center" bgcolor="#999999">
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>
<!--cc为查询条件文本框里面的值 aa为排序自己定义的变量 orderBy:'age'为根据年龄排序-- name:cc 根据姓名查询>
<tr align="center" ng-repeat="x in user|filter:{name:cc}|orderBy:aa">
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.pin}}</td>
<td>{{x.zhi}}</td>
<td ng-click="shan($index)" id="shan">删除</td>
</tr>
</table>
<div class="div2">
<input type="button" value="查询" id="bt" ng-click="cha()"/>
<input type="button" value="添加用户" id="bt1" ng-click="add()"/>
<br /><br /> <hr />
<!--xy系统默认为false-->
<fieldset ng-show="xy">
<legend>添加用户信息</legend>
<center>
姓名
<input type="text" ng-model="tname" /><br /><br />
年龄
<input type="text" ng-model="tage" /><br /><br />
拼音
<td><input type="text" ng-model="tpin" /><br /><br />
职位
<input type="text" ng-model="tzhi" /><br /><br />
<input type="button" value="保存" ng-click="bao()" />
</center>
</fieldset>
</div>
</div>
</body>
<script>
var app=angular.module("myapp",[]);
app.controller("mycr",function($scope){
$scope.user=[{"name":"张三","age":"45","pin":"zhangsan","zhi":"总经理"},{"name":"李四","age":"38","pin":"lisi","zhi":"设计师"},{"name":"王五","age":"45","pin":"wangwu","zhi":"工程师"},{"name":"赵刘","age":"33","pin":"zhaoliu","zhi":"工程师"},{"name":"周七","age":"33","pin":"zhouqi","zhi":"人事经理"}];
$scope.myage=["按年龄倒序","按年龄升序"];
//查询的点击事件
$scope.cha=function(){
//输入框为空提示
if($scope.mname==undefined||$scope.mname==""){
alert("请输入姓名");
}
//过滤关键字的代码 $scope.mname为查询框里面的值
if($scope.mname.indexOf("你")>=0){
alert("不能有关键字");
return ;
}
//没找到的代码
var flog=true;
//遍历数组取到name的值
for (var i=0;i<$scope.user.length;i++) {
var n=$scope.user[i].name;
if(n.indexOf($scope.mname)>=0){
flog=false;
}
}
if(flog){
alert("没找到")
}
//设置过滤器的值为查询条件的值
$scope.cc=$scope.mname;
}
//排序的方法
$scope.xuan=function(){
//alert($scope.ni)
//获取select里面的model的变量值
if ($scope.ni=="按年龄倒序") {
$scope.aa='-age';
}else{
$scope.aa='age';
}
}
//删除的方法
$scope.shan=function($index){
var r=confirm("确定要删除吗");
if (r==true) {
$scope.user.splice($index,1);
}
}
//点击添加显示的方法
$scope.add=function(){
$scope.xy=true;
}
//保存的方法
$scope.bao=function(){
var shu=/^\w+$/;
var shu1=$scope.tage;
if(!shu.test(shu1)){
alert("年龄格式错误")
}else{
//找到文本框输入要添加的值
var ur={"name":$scope.tname,
"age":$scope.tage,
"pin":$scope.tpin,
"zhi":$scope.tzhi
};
//把对象放到集合中
$scope.xy=false;
}
}
})
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycr">
<div class="div">
姓名查询条件<input type="text" ng-model="mname"/>
<!--设置初始值为$scope.myage=["按年龄倒序","按年龄升序"];里面的按年龄排序-- >
<option ng-repeat="xx in myage">{{xx}}</option>
</select>
<br /><br />
用户列表<br><br />
<table border="1px" cellspacing="1" cellpadding="0" width="400px">
<tr align="center" bgcolor="#999999">
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>
<!--cc为查询条件文本框里面的值 aa为排序自己定义的变量 orderBy:'age'为根据年龄排序-- name:cc 根据姓名查询>
<tr align="center" ng-repeat="x in user|filter:{name:cc}|orderBy:aa">
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.pin}}</td>
<td>{{x.zhi}}</td>
<td ng-click="shan($index)" id="shan">删除</td>
</tr>
</table>
<div class="div2">
<input type="button" value="查询" id="bt" ng-click="cha()"/>
<input type="button" value="添加用户" id="bt1" ng-click="add()"/>
<br /><br /> <hr />
<!--xy系统默认为false-->
<fieldset ng-show="xy">
<legend>添加用户信息</legend>
<center>
姓名
<input type="text" ng-model="tname" /><br /><br />
年龄
<input type="text" ng-model="tage" /><br /><br />
拼音
<td><input type="text" ng-model="tpin" /><br /><br />
职位
<input type="text" ng-model="tzhi" /><br /><br />
<input type="button" value="保存" ng-click="bao()" />
</center>
</fieldset>
</div>
</div>
</body>
<script>
var app=angular.module("myapp",[]);
app.controller("mycr",function($scope){
$scope.user=[{"name":"张三","age":"45","pin":"zhangsan","zhi":"总经理"},{"name":"李四","age":"38","pin":"lisi","zhi":"设计师"},{"name":"王五","age":"45","pin":"wangwu","zhi":"工程师"},{"name":"赵刘","age":"33","pin":"zhaoliu","zhi":"工程师"},{"name":"周七","age":"33","pin":"zhouqi","zhi":"人事经理"}];
$scope.myage=["按年龄倒序","按年龄升序"];
//查询的点击事件
$scope.cha=function(){
//输入框为空提示
if($scope.mname==undefined||$scope.mname==""){
alert("请输入姓名");
}
//过滤关键字的代码 $scope.mname为查询框里面的值
if($scope.mname.indexOf("你")>=0){
alert("不能有关键字");
return ;
}
//没找到的代码
var flog=true;
//遍历数组取到name的值
for (var i=0;i<$scope.user.length;i++) {
var n=$scope.user[i].name;
if(n.indexOf($scope.mname)>=0){
flog=false;
}
}
if(flog){
alert("没找到")
}
//设置过滤器的值为查询条件的值
$scope.cc=$scope.mname;
}
//排序的方法
$scope.xuan=function(){
//alert($scope.ni)
//获取select里面的model的变量值
if ($scope.ni=="按年龄倒序") {
$scope.aa='-age';
}else{
$scope.aa='age';
}
}
//删除的方法
$scope.shan=function($index){
var r=confirm("确定要删除吗");
if (r==true) {
$scope.user.splice($index,1);
}
}
//点击添加显示的方法
$scope.add=function(){
$scope.xy=true;
}
//保存的方法
$scope.bao=function(){
var shu=/^\w+$/;
var shu1=$scope.tage;
if(!shu.test(shu1)){
alert("年龄格式错误")
}else{
//找到文本框输入要添加的值
var ur={"name":$scope.tname,
"age":$scope.tage,
"pin":$scope.tpin,
"zhi":$scope.tzhi
};
//把对象放到集合中
$scope.user.push(ur);
//清空数据
$scope.tname="";
$scope.tpin="";
$scope.tage="";
$scope.tzhi="";
$scope.cc="";
//隐藏
$scope.xy=false;
}
}
})