html angular+route:模糊查詢+下拉排序+新增內容+判斷是否重複+輸入敏感字提示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第三週</title>
<style type="text/css">
tr {
background: #D4D4D4;
}
tr:nth-child(2n) {
background: #FFFFFF;
}
tr {
background-color: expression((this.sectionRowIndex % 2==0) ? "#FF3": "#6F9");
}
</style>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script>
//定義表格內容
var app = angular.module("myApp", ['ngRoute']);
//使用config配置路由規則
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/addUser", {
controller: "addUserCtrl",
templateUrl: "addUser.html"
})
}]);
//自定義過濾器
app.filter("myFilter", function() {
return function(text) {
//alert("fasd");
if(text.indexOf("敏感字符") >= 0) {
//alert("asdfasdf");
alert("包含敏感字符")
return text.replace(/敏感字符/g, "***");
}
return text;
}
});
app.controller("myCtrl", function($scope, $location) {
//定義表格內容
$scope.desc = 1; //默認排序條件升序
$scope.gen = "";
$scope.users = [{
name: "張三",
pwd: "控球后衛",
age: "11",
sex: 999,
},
{
name: "李四",
pwd: "大前鋒",
age: "21",
sex: 888,
},
{
name: "王五",
pwd: "小前鋒",
age: "23",
sex: 777,
},
{
name: "趙六",
pwd: "中鋒",
age: "10",
sex: 666,
},
{
name: "周七",
pwd: "得分後衛",
age: "1",
sex: 555,
}
];
//定義跳轉方法
//定義頁面跳轉方法
$scope.goToUrl = function(path) {
// alert(path);
$location.path(path);
}
});
//添加用戶控制器
//定義添加用戶控制器
app.controller("addUserCtrl", function($scope) {
$scope.name = "";
$scope.pwd = "";
$scope.age = "";
$scope.sex = "";
var f = true;
$scope.sub = function() {
if($scope.name == "") {
alert("姓名不能爲空");
} else {
for(user in $scope.users) {
if($scope.users[user].name == $scope.name) {
alert("已經存在");
f = false;
break;
}
}
if(f) {
alert($scope.name);
$scope.users.push({
name: $scope.name,
pwd: $scope.pwd,
age: $scope.age,
sex: $scope.sex * 1,
});
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<span style="margin-right: 150px;">查詢</span><span>排序</span><br />
<input id="cx" type="text" placeholder="姓名查詢" style="width: 130px;margin-right: 40px;" ng-model="gen">
<select style="width: 130px;">
<option selected="selected" ng-click="desc!=1">票數倒序</option>
<option ng-click="desc=0">票數正序</option>
</select>
</div>
<br><br>
<button class="addUser" ng-click="goToUrl('/addUser')" style="background-color:deepskyblue;width: 100px;height: 50px;">新增球員</button><br /><br />
<br>
<div>
<table border="1" cellspacing="0" cellpadding="1" width="300px">
<thead>
<tr style="background-color: gray;">
<th>姓名</th>
<th>位置</th>
<th>球號</th>
<th>票數</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter:{name:gen} | orderBy:'sex':desc">
<td>{{user.name | myFilter }}</td>
<td>{{user.pwd}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
</tr>
</tbody>
</table>
</div>
<!-- 1.添加用戶頁面 -->
<script type="text/ng-template" id="addUser.html">
<form action="">
<table border="1" cellspacing="1" cellpadding="10" style="">
<tr>
<th>姓名：</th>
<td><input ng-model="name" placeholder="請輸入姓名" /></td>
</tr>
<tr>
<th>位置：</th>
<td><input ng-model="pwd" placeholder="請輸入位置" /></td>
</tr>
<tr>
<th>球號：</th>
<td><input ng-model="age" placeholder="請輸入球號" /></td>
</tr>
<tr>
<th>票數：</th>
<td><input type="number" ng-model="sex" placeholder="請輸入票數" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
</tr>
</table>
</form>
</script>
<div ng-view="">
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
【網頁】如何下載網頁中mathplayer插件中的pdf文件
1、右鍵網頁——查看網頁源代碼 2、找到源碼中的pdf文件並點擊進去 3、在pdf瀏覽頁面中選中全部頁面：右鍵——答應打印 4、點擊更改 5、點擊另存爲pdf 6、最後再返回點擊保存即可
網頁製作--hover
要求：鼠標浮在某一鏈接時顯示其內容 一、代碼： 二、網頁效果 三、總結 設置行高: line-height:30px; 設置字體間距：word-spacing:15px; 設置首行縮進：line-in