<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("ctrl",function($scope){
$scope.stus=[{
name:"张三",
age:30,
cname:"zhangsan",
zhiwei:"总经理"
},
{
name:"李四",
age:20,
cname:"lisi",
zhiwei:"设计师"
}
]
//删除
$scope.sc=function(i){
$scope.stus.splice(i,1);
}
//新增商品
$scope.formShow=false;
$scope.formShowFun=function(){
if($scope.formShow){
$scope.formShow=false;
}else{
$scope.formShow=true;
}
}
//提交商品验证
$scope.newId = "";
$scope.newName = "";
$scope.newPrice = "";
$scope.checkSub = [];
$scope.divShow = false;
$scope.sub=function(){
$scope.checkSub = [];
if($scope.checkSub.length > 0) {
$scope.divShow = true;
} else {
$scope.divShow = false;
var newPro = {
"id": parseInt($scope.newId),
"name": $scope.name,
"age":$scope.age,
"cname": $scope.cname,
"zhiwei": $scope.zhiwei,
};
$scope.stus.push(newPro);
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="ctrl">
姓名查询条件:<input type="text" />
<input type="text" placeholder="按照年龄倒序"><select>
<option value="">按照年龄倒序</option>
<optio value="正序">正序</optio>
</select>
<table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>
<tr ng-repeat=" s in stus |filter:{name:bname}">
<td>{{s.name}}</td>
<td>{{s.age}}</td>
<td>{{s.cname}}</td>
<td>{{s.zhiwei}}</td>
<td><button ng-click="sc($index)" >删除</button></td>
</tr>
</table><br>
<button ng-click="bname=name">查询</button>
<button ng-click="formShow=true" style=" align-content: ;">添加产品</button><br /><br>
<!--添加-->
<form style="border: 1px solid blue;" width: 300px;" ng-show="formShow">
姓名: <input type="text" ng-model="name" /><br /><br />
年龄:<input type="text" ng-model="age" /><br /><br />
拼音:<input type="text" ng-model="cname" /><br /><br />
职位:<input type="text" ng-model="zhiwei" /><br /><br />
<div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="divShow">
<ul>
<li ng-repeat="chenk in checkSub">{{chenk}}</li>
</ul>
</div><br />
<input type="button" value="提交" ng-click="sub()" />
</form>
</body>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("ctrl",function($scope){
$scope.stus=[{
name:"张三",
age:30,
cname:"zhangsan",
zhiwei:"总经理"
},
{
name:"李四",
age:20,
cname:"lisi",
zhiwei:"设计师"
}
]
//删除
$scope.sc=function(i){
$scope.stus.splice(i,1);
}
//新增商品
$scope.formShow=false;
$scope.formShowFun=function(){
if($scope.formShow){
$scope.formShow=false;
}else{
$scope.formShow=true;
}
}
//提交商品验证
$scope.newId = "";
$scope.newName = "";
$scope.newPrice = "";
$scope.checkSub = [];
$scope.divShow = false;
$scope.sub=function(){
$scope.checkSub = [];
if($scope.checkSub.length > 0) {
$scope.divShow = true;
} else {
$scope.divShow = false;
var newPro = {
"id": parseInt($scope.newId),
"name": $scope.name,
"age":$scope.age,
"cname": $scope.cname,
"zhiwei": $scope.zhiwei,
};
$scope.stus.push(newPro);
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="ctrl">
姓名查询条件:<input type="text" />
<input type="text" placeholder="按照年龄倒序"><select>
<option value="">按照年龄倒序</option>
<optio value="正序">正序</optio>
</select>
<table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>
<tr ng-repeat=" s in stus |filter:{name:bname}">
<td>{{s.name}}</td>
<td>{{s.age}}</td>
<td>{{s.cname}}</td>
<td>{{s.zhiwei}}</td>
<td><button ng-click="sc($index)" >删除</button></td>
</tr>
</table><br>
<button ng-click="bname=name">查询</button>
<button ng-click="formShow=true" style=" align-content: ;">添加产品</button><br /><br>
<!--添加-->
<form style="border: 1px solid blue;" width: 300px;" ng-show="formShow">
姓名: <input type="text" ng-model="name" /><br /><br />
年龄:<input type="text" ng-model="age" /><br /><br />
拼音:<input type="text" ng-model="cname" /><br /><br />
职位:<input type="text" ng-model="zhiwei" /><br /><br />
<div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="divShow">
<ul>
<li ng-repeat="chenk in checkSub">{{chenk}}</li>
</ul>
</div><br />
<input type="button" value="提交" ng-click="sub()" />
</form>
</body>
</html>