用angular方法简单实现了吃了么搜索小功能，还不太完善，后续会继续添加新内容。

来源：互联网发布：苹果手机淘宝比价插件编辑：程序博客网时间：2024/06/09 18:09

用angular方法简单实现了吃了么搜索小功能，还不太完善，后续会继续添加新内容。

最近接触了Angular框架，今天用里面的http请求方法做了一个小的案例，是一个查询地名获取附近美食的小案例。还不太完善，后面面有时间会继续添加新的内容。这个小案例没有用到任何的jQuery与原生js方法。

先上HTML结构代码与HTML结构中的angular指令。

<body ng-app="app"><div ng-controller="con" id="con"><h1>吃了么</h1>    <div id="nav">        <button ng-click="get()">获取地名</button>        <select ng-change="citis.alphbets" ng-model="alphbet" >            <option ng-repeat="item in citis.alphbets"  value="{{item}}">{{item}}</option>        </select>        <select ng-model="cityId" ng-change="show()">            <option ng-repeat="item in citis.city[alphbet]" value="{{item.id}}">{{item.name}}</option>        </select>    </div>    <div id="search">        <input type="text" ng-keyup="keyup()" ng-model="search">        <div>            <ul>                <li ng-repeat="item in position" >                    <div ng-click="getday(item)" title="item">{{item.name}}</div>                </li>            </ul>        </div>    </div>    <div id="pa">        <div ng-repeat="item in commodit"  class="commodit">            <h3>{{item.name}}</h3>            <p>{{item.phone}}</p>            <img ng-src="item.image_path|getImgUrl" alt="">        </div>    </div></div>

这里面有些简单的Angular指令，就不多做介绍了，下面就是AngularJs的代码，一些介绍也都写在了代码注释里

<script>//定义两个全局变量，用来接收需要全局传递的数据var data1,geohash;    angular.module("app",[])    //添加一个自定义过滤器，用来过滤最后获取到的商品图片的src路径    .filter("getImgUrl",function(){        var r1=/^(.)(..)/;        var r2=/(jpeg|png|gif|jpg)$/;        return function(urlPart){            //拼接获取到的商家图片src路径             return ' https://fuss10.elemecdn.com/' + urlPart .replace(r1, '$1/$2/') .replace(r2, '$1.$1'+'imageMogr2/thumbnail/70x70/format/webp/quality/85');        }    })    .controller("con",["$scope","$http",function($scope,$http){        $scope.get=function(){            $http({                url:"http://jklib.org/ele/cities.ashx",                method:"get"            }).success(function(data){                //data是一个获取到的数据，把它添加到$scope对象中                $scope.citis={                    alphbets:Object.keys(data),                    city:data                }                //把数据映射到全局中                data1 = data;              })        };        //给页面添加一个show方法        $scope.show=function(){            var city;            cities=data1[$scope.alphbet];            for(var i=0;i<cities.length;i++){                if(cities[i].id==$scope.cityId){                city=cities[i];                break;                }            }            //地理哈希cdn，计算出哈希值，赋值给全局变量              geohash=geohashObj.encode(city.latitude, city.longitude);        };            //添加一个键盘事件，实时更新数据        $scope.keyup=function(){            //判断输入内容是否为空，如果为空直接返回            if(!$scope.search) return;            $http({                //地址拼接中需要加一个哈希值                url:'http://jklib.org/ele/pois.ashx?geohash=' + geohash + '&keyword=' + $scope.search,                method:"get"            }).success(function(data){                //把传回来的数据添加到$scope中，方便使用                    $scope.position=data;            })        }        $scope.getday=function(item){            $http({                url: 'http://jklib.org/ele/restaurants.ashx?geohash=' + item.geohash + '&longitude=' + item.longitude + '&latitude=' + item.latitude,                method:"get"            }).success(function(data){                $scope.commodit=data;            })        }    }])</script>

　一个Angular实现的小案例，主要用来练手，里面主要方法还是跨域的相关知识，和这里也没有太多关系，就不多做介绍了，一些简单的指令加一部分angular js的代码就可以实现非常实用的小功能，后续还会继续添加新内容。

阅读全文

0 0