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"><input type="text" ng-model="name">정렬:
<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>위 와 같이 소 편 이 소개 한 AngularJS 퍼 지 조회 기능 구현 코드(필터 내용 드 롭 다운 메뉴 정렬 필터 민감 문자 검증 판단 후 표 정보 추가)입 니 다.도움 이 되 시 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
SpringMvc+Angularjs 멀티 파일 대량 업로드SpringMvc 코드 jar 가방 commons-fileupload commons-io spring-mvc.xml 구성 Controller 로컬 저장 AngularJs 코드 Form 양식 커밋 위에서 말한 것은 여...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
