您的位置：首页 > Web前端 > AngularJS
angularjs-添加数据,姓名查询,过滤敏感字符,下拉菜单查询

2017-10-23 19:02 609 查看
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title>angularjs</title>
<style type="text/css">
.even_cls {
background-color: #fff;
}

.odd_cls {
background-color: #999;
}
</style>
<script type="text/javascript">
//创建数据
var example_data = [
{
xing_ming: "张三",
wei_zhi: "控球后卫",
qiu_hao: 11,
piao_shu: 999
},
{
xing_ming: "李四",
wei_zhi: "大前锋",
qiu_hao: 21,
piao_shu: 888
},
{
xing_ming: "王五",
wei_zhi: "小前锋",
qiu_hao: 23,
piao_shu: 777
},
{
xing_ming: "赵六",
wei_zhi: "中锋",
qiu_hao: 10,
piao_shu: 666
},
{
xing_ming: "周七",
wei_zhi: "得分后卫",
qiu_hao: 1,
piao_shu: 555
}
];

var app = angular.module("myApp", []);

app.service("a", function () {
this.findAll = function () {
};
this.getRow = function () {
};
});
app.factory("a", function () {
return {
findAll: function() {},
getRow: function() {}
};
});

app.factory("$interval", function () {
return function() {};
});

app.constant("EXAMPLE_DATA", example_data);
app.controller("myCtrl", function ($scope, EXAMPLE_DATA) {
//进行排序
$scope.data = EXAMPLE_DATA;
$scope.add_qiu_yuan_form = false;

$scope.showAddQiuYuanForm = function () {
$scope.add_qiu_yuan_form = true;
};
//对数据进行判断
$scope.submitQiuYuanForm = function () {
if ($scope.xing_ming == undefined || $scope.xing_ming == "") {
// alert("姓名不能为空！");
return;
}

if ($scope.wei_zhi == undefined || $scope.wei_zhi == "") {
return;
}

if ($scope.qiu_hao == undefined || $scope.qiu_hao == "") {
return;
}

if ($scope.piao_shu == undefined || $scope.piao_shu == "") {
return;
}

if (!/^\d+$/.test($scope.qiu_hao)) {
alert("球号必须是整数！");
return;
}

if (!/^\d+$/.test($scope.piao_shu)) {
alert("票数必须是整数！");
return;
}
//添加数据
$scope.data.push(
{
xing_ming: $scope.xing_ming,
wei_zhi: $scope.wei_zhi,
qiu_hao: $scope.qiu_hao,
piao_shu: $scope.piao_shu
}
);

$scope.xing_ming = "";
$scope.wei_zhi = "";
$scope.qiu_hao = "";
$scope.piao_shu = "";
$scope.add_qiu_yuan_form = false;
};
//判断敏感词,是敏感词显示为****
$scope.search = function () {
if ($scope.search_xing_ming_value == undefined || $scope.search_xing_ming_value == "") {
$("tr").show();
return;
}

if ($scope.search_xing_ming_value == "习近平") {
alert("敏感词");
return;
}

for (var idx in $scope.data) {
var trIdx = parseInt(idx) + 1;
if ($scope.search_xing_ming_value == $scope.data[idx].xing_ming) {
$("tr:eq(" + trIdx + ")").show();
} else {
$("tr:eq(" + trIdx + ")").hide();
}
}
};
$scope.order2 = function (num) {
if (num == "") {
return;
}

return (parseInt(num) == 2) ? true : false;
}
});

app.filter("mgc", function () {
return function (msg, flag) {
return msg.replace(flag, "***");
};
});
</script>
</head>
<body ng-controller="myCtrl">

查询：<input type="text" ng-model="search_xing_ming_value" ng-change="search()"/>
<select ng-model="search_piao_shu_value">
<option value="">排序</option>
<option value="1">票数正序</option>
<option value="2">票数倒序</option>
</select><br/>

<button ng-click="showAddQiuYuanForm()">新增球员</button>

<table border="1">

d204
<thead>
<tr style="background-color: #666">
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="qiu_yuan in data | orderBy: 'piao_shu': order2(search_piao_shu_value)"
ng-class="{even_cls: !$even, odd_cls: !$odd}">
<td>{{ qiu_yuan.xing_ming | mgc: '习近平' }}</td>
<td ng-bind="qiu_yuan.wei_zhi"></td>
<td ng-bind="qiu_yuan.qiu_hao"></td>
<td ng-bind="qiu_yuan.piao_shu"></td>
</tr>
</tbody>
</table>

<div>敏感词：习近平</div>

<div ng-show="add_qiu_yuan_form">
<p>添加球员</p>

<p>姓名：<input type="text" ng-model="xing_ming"/></p>

<p>位置：<input type="text" ng-model="wei_zhi"/></p>

<p>球号：<input type="text" ng-model="qiu_hao"/></p>

<p>票数：<input type="text" ng-model="piao_shu"/></p>

<p>
<button ng-click="submitQiuYuanForm()">提交</button>
</p>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航