http-nbaPlayer展示
nbaPlayer文件夾放到服務(wù)器,
index.html 導(dǎo)入angular.js 和players.json
創(chuàng)建模塊和控制器, $http發(fā)送get請(qǐng)求,打印
添加屬性 $scope.allPlays = res;
遍歷li, 添加內(nèi)容
第一個(gè)搜索框,添加指令ng-model="searchContent"
ul 過濾搜索內(nèi)容
<ul class="title info" ng-repeat="info in allPlays | filter:searchContent">
8.排序雙向綁定
<p>排序</p>
<!--使用select時(shí), 要求對(duì)指定的值ng-model給定初始值 -->
<select ng-model="order" ng-init="order='name'">
<option value="">請(qǐng)選擇</option>
<option value="votes">票數(shù)</option>
<option value="name">姓名</option>
<option value="num">號(hào)碼</option>
</select>
9.過濾排序
<ul class="title info" ng-repeat="info in allPlays | filter:searchContent | orderBy:order">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<script src="../angular.js"></script>
<script>
//1.創(chuàng)建模塊
var app = angular.module('app', []);
//2.創(chuàng)建控制器
app.controller("skController", ["$scope", "$http",function ($scope, $http) {
$http({
url:'../nba.php',
methor:'get'
}).success(function (res) {
//console.log(res);
$scope.allPlays = res;
}).error(function (error) {
console.log(error);
})
}]);
//3.綁定模塊 ng-app="app"
//4.綁定控制器
</script>
<body ng-app="app" ng-controller="skController">
<div class="header">NBA選票</div>
<div class="content">
<ul class="content_h">
<li>
<p >搜索</p>
<!--雙向綁定-->
<input type="text" ng-model="searchContent">
</li>
<li>
<p>排序</p>
<!--使用select時(shí), 要求對(duì)指定的值ng-model給定初始值 -->
<select ng-model="order" ng-init="order='name'">
<option value="">請(qǐng)選擇</option>
<option value="-votes">票數(shù)</option><!--負(fù)號(hào)降序排列-->
<option value="name">姓名</option>
<option value="num">號(hào)碼</option>
</select>
</li>
</ul>
<ul class="title">
<li></li>
<li>姓名</li>
<li>位置</li>
<li>號(hào)碼</li>
<li>球隊(duì)</li>
<li>票數(shù)</li>
</ul>
<ul class="title info" ng-repeat="info in allPlays | filter:searchContent | orderBy:order">
<li style="text-align: center">
</li>
<li><a href="#">{{info.name}}</a></li>
<li>{{info.position}}</li>
<li>{{info.num}}</li>
<li>{{info.team}}</li>
<li>{{info.votes}}</li>
</ul>
</div>
</body>
</html>
