AngulrJS 表格查询-添加-下拉列表-删除的使用

最新推荐文章于 2023-02-13 10:37:00 发布

来日未必方长

最新推荐文章于 2023-02-13 10:37:00 发布

阅读量265

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/mayn666/article/details/78755047

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>表格查询-添加-下拉列表-删除的使用</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<style>
.bt1 {
margin-top: 50px;
width: 100px;
height: 50px;
margin-left: 100px;
}

.bt2 {
margin-top: 50px;
width: 100px;
height: 50px;
margin-left: 100px;
}

.tr1 {
background: #999999;
}

.tr2:nth-of-type(odd) {
background: #EEEEEE;
}

.fie {
width: 500px;
height: 150px;
}

a{
text-decoration: none;
}

.tr2 :hover{

background: burlywood;
}

</style>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
查询条件:<input type="text" ng-model="chatj" />

<select ng-change="change()" ng-model="age" ng-init="age=ages[0]">
<option ng-repeat="x in paixu">{{x}}</option>
</select>

<table border="1px" cellspacing="0px" width="500px" height="30px" class="ta">
<tr class="tr1">
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
<tr ng-repeat="da in datas" class="tr2">
<td>{{da.name}}</td>
<td>{{da.age}}</td>
<td>{{da.pin}}</td>
<td>{{da.wei}}</td>
<td>
<a href="#" ng-click="shan($index)">删除</a>
</td>
</tr>
</table>

<input class="bt1" type="button" value="查询" ng-click="chaxun()" />
<input class="bt2" type="button" value="添加" ng-click="xianshi()" />

<fieldset ng-show="baocun" class="fie">
<legend>添加用户信息</legend>
姓名:<input type="text" ng-model="name1" /><br> 年龄:

<input type="text" ng-model="age1" /><br> 拼音:
<input type="text" ng-model="pin1" /><br> 职位:
<input type="text" ng-model="wei1" /><br>
<input type="button" value="保存" ng-click="add()" />
</fieldset>

<script type="text/javascript">
var mk = angular.module("myApp", []);
mk.controller("myCtrl", function($scope) {

//表格内容数组
$scope.datas = [];

//显示添加框的方法
$scope.xianshi = function() {
$scope.baocun = true;
}

//添加的方法
$scope.add = function() {
//创建对象
var obj = {
"name": $scope.name1,
"age": $scope.age1,
"pin": $scope.pin1,
"wei": $scope.wei1,
}

//添加到数组
$scope.datas.push(obj);

$scope.baocun = false;
}

//删除的方法
$scope.shan = function($index){

$scope.datas.splice($index,1);
return false;
}

//排序的方法
//下拉列表的数组
$scope.paixu = ["倒序排列", "正序排列"];

$scope.change = function(){
//获取排序模式
var px = $scope.age;
console.log(px+"------")

if (px=="倒序排列") {

$scope.datas.sort(function(a,b){

return b.age - a.age;
})
}else{

$scope.datas.sort(function(a,b){

return a.age - b.age;
})
}

}

//查询的方法
$scope.chaxun = function(){

//每次查询的时候，为了防止第二次失败，需要充值数组
//$scope.datas = [];

//创建新数组
var newData = [];

var n1 = $scope.chatj;
if (n1=="") {
alert("查询条件不能为空")
return;
}

for (var i = 0; i < $scope.datas.length; i++) {

var n2 = $scope.datas[i].name;
if (n1==n2) {

newData.push($scope.datas[i]);
}
}

//判断
if (newData.length==0) {
alert("没有匹配的内容")
return;
}

$scope.datas = newData;
}

})
</script>
</body>

</html>

来日未必方长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngulrJS 表格查询-添加-下拉列表-删除的使用

表格查询-添加-下拉列表-删除的使用.bt1 {margin-top: 50px;width: 100px;height: 50px;margin-left: 100px;}.bt2 {margin-top: 50px;width: 100px;height: 50px;margin-left: 100px;}.tr1
复制链接

扫一扫