Angular实现nba选票demo

---

一、获取players.json数据

1.利用php文件将players.json导入输出

echo file_get_contents('players.json');

2.通过$http服务获取到players.php里面的从json文件读取到的数据

$http({
            url:'player.php',
            method: 'get'
        }).success(function (res) {
            /*已经拿到数据*/
            console.log(res);
            $scope.reslist = res
        }).error(function (err) {
            console.log('请求失败');
        })

二、将获取到的数据展示输出页面

使用ng-repeat遍历reslist里面所有数据，并展示页面

<ul class="title info" ng-repeat="play in reslist ">

    <li style="text-align: center;"><img  style="width: 60px; height: 40px"alt="" ng-src="img/players/{{play.thumb}}"></li>
    <li><a href="#">{{play.name}}</a></li>
    <li>{{play.position}}</li>
    <li>{{play.num}}</li>
    <li>{{play.team}}</li>
    <li>{{play.votes}}</li>

</ul>

三、实现对数据搜索筛选的功能

使用过滤器：filter

filter:’search’ 全文检索

filter:{name:search} 指定字段进行搜索

filter:{name:search}:true 精确查找

在这里我们使用精确查找，在使用精确查找前我们需要对数据实现双向绑定，即在搜索框中输入内容，过滤器来获取到内容。

<input type="text" ng-model="search">

最后对reslist进行精确过滤

ng-repeat="play in reslist | filter: {name: search}:true"

四、实现对数据进行排序功能

使用过滤器：orderBy

当然我们同样先对数据实现双向绑定

<select ng-model="order">
<ul class="title info" ng-repeat="play in resList | filter:{name:searchC} | orderBy:order">

完成之后，在select中会出现一种情况，当我们没有对ng-model初始化或者没有给其中的option选项给定个初始值时，会导致select选项一出来是空值。

第一种解决方案

使用select时，要求对指定的值ng-model给定一初始值
<select ng-model="order" ng-init="order='name'">  
    <option value="-votes">票数</option>
    <option value="name">姓名</option>
    <option value="num">号码</option>
</select>-->

第二种解决方案

<select ng-model="order">
     <option value="">请选择</option>
     <option value="-votes">票数</option>
     <option value="name">姓名</option>
     <option value="num">号码</option>
</select>

---

• << 上一篇
• 下一篇 >>