http-nbaPlayer展示
nbaPlayer文件夹放到服务器,
index.html 导入angular.js 和players.json
创建模块和控制器, $http发送get请求,打印
添加属性 $scope.allPlays = res;
遍历li, 添加内容
第一个搜索框,添加指令ng-model="searchContent"
ul 过滤搜索内容
<ul class="title info" ng-repeat="info in allPlays | filter:searchContent">
8.排序双向绑定
<p>排序</p>
<!--使用select时, 要求对指定的值ng-model给定初始值 -->
<select ng-model="order" ng-init="order='name'">
<option value="">请选择</option>
<option value="votes">票数</option>
<option value="name">姓名</option>
<option value="num">号码</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.创建模块
var app = angular.module('app', []);
//2.创建控制器
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时, 要求对指定的值ng-model给定初始值 -->
<select ng-model="order" ng-init="order='name'">
<option value="">请选择</option>
<option value="-votes">票数</option><!--负号降序排列-->
<option value="name">姓名</option>
<option value="num">号码</option>
</select>
</li>
</ul>
<ul class="title">
<li></li>
<li>姓名</li>
<li>位置</li>
<li>号码</li>
<li>球队</li>
<li>票数</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>
