AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過(guò)濾內(nèi)容下拉菜單排序過(guò)濾敏感字符驗(yàn)證判斷后添加表格信息)
注:添加球員的功能無(wú)指定技術(shù)要求,添加球員的頁(yè)面也無(wú)具體樣式要求。
1.實(shí)現(xiàn)上圖頁(yè)面所有元素,頁(yè)面布局規(guī)整,跟上圖效果一致
2.實(shí)現(xiàn)文案顯示,按效果顯示
3.實(shí)現(xiàn)查詢,實(shí)現(xiàn)查詢敏感詞過(guò)濾,實(shí)現(xiàn)查詢后列表變化
4.實(shí)現(xiàn)倒序,實(shí)現(xiàn)正序,下拉列表排序效果都實(shí)現(xiàn)
5.按鈕背景一致,按鈕樣式
6.實(shí)現(xiàn)添加球員頁(yè)面,添加球員頁(yè)面樣式,添加球員功能,添加球員必填項(xiàng)判斷,添加完球員后能顯示在表格內(nèi),已存在球員判重。
7.表格樣式跟上圖樣式一致
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3:AngularJS:模糊查詢過(guò)濾內(nèi)容,下拉菜單排序,過(guò)濾敏感字符,驗(yàn)證判斷后添加表格信息</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:"控球后衛(wèi)",hao:"11",piao:"999"}, {name:"李四",wei:"大前鋒",hao:"21",piao:"888"}, {name:"王五",wei:"小前鋒",hao:"23",piao:"777"}, {name:"趙六",wei:"中鋒",hao:"10",piao:"666"}, {name:"周七",wei:"得分后衛(wèi)",hao:"1",piao:"555"}, ] $scope.name=""; $scope.search2=""; $scope.$watch("name",function (value) { if(value.indexOf("槍")!=-1) { alert("輸入內(nèi)容含有敏感字"); $scope.name=""; } else { $scope.search2=$scope.name; } }) $scope.order="-請(qǐng)選擇-"; //排序 $scope.pai=function () { if( $scope.order!="-請(qǐng)選擇-") { if( $scope.order=="票數(shù)正敘") { 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("此項(xiàng)為必填項(xiàng)"); } 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">
查詢:<input type="text" ng-model="name">
排序:
<select ng-model="order"> <option>-請(qǐng)選擇-</option> <option>票數(shù)倒敘</option> <option>票數(shù)正敘</option> </select><br> <button ng-click="add()" class="btn">添加球員</button> <table border="1px soilde #000" width="400px"> <tr> <th>姓名</th> <th>位置</th> <th>球號(hào)</th> <th>票數(shù)</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>球號(hào):</td> <td><input type="text" ng-model="uhao"></td> </tr> <tr> <td>票數(shù):</td> <td><input type="text" ng-model="upiao"></td> </tr> <tr align="center"><td><button ng-click="adduser()">添加</button></td></tr> </table> </body> </html>
總結(jié)
以上所述是小編給大家介紹的AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過(guò)濾內(nèi)容下拉菜單排序過(guò)濾敏感字符驗(yàn)證判斷后添加表格信息),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- AngularJS實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)(ztree)菜單示例代碼
- 實(shí)例詳解AngularJS實(shí)現(xiàn)無(wú)限級(jí)聯(lián)動(dòng)菜單
- AngularJS折疊菜單實(shí)現(xiàn)方法示例
- AngularJS實(shí)現(xiàn)的select二級(jí)聯(lián)動(dòng)下拉菜單功能示例
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)手風(fēng)琴菜單代碼
- AngularJS動(dòng)態(tài)菜單操作指令
- AngularJS+Bootstrap3多級(jí)導(dǎo)航菜單的實(shí)現(xiàn)代碼
- Angular.JS實(shí)現(xiàn)無(wú)限級(jí)的聯(lián)動(dòng)菜單(使用demo)
- angularjs+bootstrap菜單的使用示例代碼
- Angluar+zorro實(shí)現(xiàn)無(wú)限級(jí)菜單
相關(guān)文章
AngularJS 模塊詳解及簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 模塊,這里幫大家整理了相關(guān)資料,詳細(xì)介紹了AngularJS的基礎(chǔ)知識(shí),有需要的朋友可以參考下2016-07-07AngularJS bootstrap啟動(dòng)詳解及實(shí)例代碼
這篇文章主要介紹了AngularJS bootstrap啟動(dòng)的知識(shí),這里整理了相關(guān)資料及簡(jiǎn)單實(shí)例代碼,,需要的朋友可以參考下2016-09-09基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例
這篇文章主要介紹了基于angular6.0實(shí)現(xiàn)的一個(gè)組件懶加載功能示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04Angularjs分頁(yè)查詢的實(shí)現(xiàn)
本文給大家分享angularjs實(shí)現(xiàn)分頁(yè)查詢功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-02-02解決angularjs WdatePicker ng-model的問(wèn)題
今天小編就為大家分享一篇解決angularjs WdatePicker ng-model的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09AngularJS中重新加載當(dāng)前路由頁(yè)面的方法
下面小編就為大家分享一篇AngularJS中重新加載當(dāng)前路由頁(yè)面的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03AngularJS實(shí)現(xiàn)與后臺(tái)服務(wù)器進(jìn)行交互的示例講解
今天小編就為大家分享一篇AngularJS實(shí)現(xiàn)與后臺(tái)服務(wù)器進(jìn)行交互的示例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08angular 實(shí)現(xiàn)下拉列表組件的示例代碼
這篇文章主要介紹了angular 實(shí)現(xiàn)下拉列表組件的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03對(duì)angularJs中自定義指令replace的屬性詳解
今天小編就為大家分享一篇對(duì)angularJs中自定義指令replace的屬性詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10