ホームページ >ウェブフロントエンド >jsチュートリアル >AngularJS ファジークエリ関数の実装コード
AngularJS ファジークエリ関数の実装コード
- 小云云オリジナル
- 2018-01-03 16:31:271987ブラウズ
私は最近、プレーヤー関数の追加を必要とするこのようなニーズに遭遇しました。次のエディターは、AngularJS ファジー クエリ関数の実装コード (フィルター コンテンツ ドロップダウン メニュー、ソート、機密文字をフィルタリングし、検証と判断後に追加します）フォーム情報）、興味のある友人はそれを見てください、私はそれがすべての人に役立つことを願っています。
注: プレーヤーを追加する機能に特定の技術要件はありません。また、プレーヤーを追加するページに特定のスタイル要件もありません。
1. 上の画像のページのすべての要素を実現し、ページのレイアウトは規則的で、効果は画像と一致しています
2. コピーライティングの表示を実現し、効果に応じて表示します
3.クエリに依存した単語のフィルタリングを実現し、クエリ後のリストの変更を実現します
4. 逆順を実現し、順方向の並べ替え効果を実現します 5. ボタンの背景とボタンのスタイルを実現します 6.選手追加ページ、選手ページ追加スタイル、選手追加機能、選手追加必須項目判定、選手追加後、表に表示でき、既存選手が存在します。 7. 表のスタイルは画像と一致しています コード:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3：AngularJS：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息</title>
<style>
*{
margin: auto;
padding: 0;
}
body{
text-align: center;
margin: 50px auto;
}
table
{
margin-top: 30px;
}
.btn
{
background: cornflowerblue;
width: 100px;
height: 50px;
}
tr:nth-child(2n){
background: #666;
}
</style>
<script src="../angular-1.5.5/angular.js"></script>
<script>
//主模板
var myapp=angular.module("myapp",[]);
//控制器
myapp.controller("myCtrl",function ($scope) {
$scope.data=[
{name:"张三",wei:"控球后卫",hao:"11",piao:"999"},
{name:"李四",wei:"大前锋",hao:"21",piao:"888"},
{name:"王五",wei:"小前锋",hao:"23",piao:"777"},
{name:"赵六",wei:"中锋",hao:"10",piao:"666"},
{name:"周七",wei:"得分后卫",hao:"1",piao:"555"},
]
$scope.name="";
$scope.search2="";
$scope.$watch("name",function (value) {
if(value.indexOf("枪")!=-1)
{
alert("输入内容含有敏感字");
$scope.name="";
}
else
{
$scope.search2=$scope.name;
}
})
$scope.order="-请选择-";
//排序
$scope.pai=function () {
if( $scope.order!="-请选择-")
{
if( $scope.order=="票数正叙")
{
console.log("0");
return false;
}
else
{
return true;
}
}
return false;
}
//添加球员
$scope.show=false;
$scope.add=function () {
$scope.show=true;
}
$scope.uname="";
$scope.uwei="";
$scope.uhao="";
$scope.upiao="";
$scope.adduser=function () {
if( $scope.uname=="" || $scope.uwei=="" || $scope.uhao=="" || $scope.upiao=="")
{
alert("此项为必填项");
}
else
{
for(var i=0;i<$scope.data.length;i++)
{
if($scope.data[i].name==$scope.uname)
{
alert("此球员已存在");
$scope.uname="";
$scope.uwei="";
$scope.uhao="";
$scope.upiao="";
break;
}
else if(i==$scope.data.length-1)
{
$scope.data.push({name:$scope.uname,wei:$scope.uwei,hao:$scope.uwei,piao:$scope.upiao});
$scope.uname="";
$scope.uwei="";
$scope.uhao="";
$scope.upiao="";
$scope.show=false;
break;
}
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl"> クエリ: 並べ替え:
<select ng-model="order">
<option>-请选择-</option>
<option>票数倒叙</option>
<option>票数正叙</option>
</select><br>
<button ng-click="add()" class="btn">添加球员</button>
<table border="1px soilde #000" width="400px">
<tr>
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
<tr ng-repeat="item in data|filter:search2|orderBy:'piao':pai()">
<td>{{item.name}}</td>
<td>{{item.wei}}</td>
<td>{{item.hao}}</td>
<td>{{item.piao}}</td>
</tr>
</table>
<table border="1px solide #000" ng-show="show">
<tr>
<td>姓名:</td>
<td><input type="text" ng-model="uname"></td>
</tr>
<tr>
<td>位置:</td>
<td><input type="text" ng-model="uwei"></td>
</tr>
<tr>
<td>球号:</td>
<td><input type="text" ng-model="uhao"></td>
</tr>
<tr>
<td>票数:</td>
<td><input type="text" ng-model="upiao"></td>
</tr>
<tr align="center"><td><button ng-click="adduser()">添加</button></td></tr>
</table>
</body>
</html> 関連する推奨事項:
php7でMongoDBのファジークエリを実装する方法を詳しく説明
以上がAngularJS ファジークエリ関数の実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。