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

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

2024-09-12 03:09:12   220人阅读

最近接触了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="http://www.mamicode.com/{{item}}">{{item}}</option>
            </select>
            <select ng-model="cityId" ng-change="show()">
                <option ng-repeat="item in citis.city[alphbet]" value="http://www.mamicode.com/{{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="http://www.mamicode.com/item.image_path|getImgUrl" >
            </div>
        </div>
    </div>
</body>

　　这里面有些简单的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的代码就可以实现非常实用的小功能，后续还会继续添加新内容。

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


联系
我们