angular 几个 服务 orderBy排序 省市联动

最新推荐文章于 2021-03-29 18:44:07 发布
最新推荐文章于 2021-03-29 18:44:07 发布
阅读量266 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guiyide/article/details/79068062
版权

/

service服务


<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../angular/angular.js" ></script>
        <script>
            var app = angular.module("myApp",[]);
            app.controller("myCtrl",function($scope,$a){
                $scope.name = myService.name;
                $scope.sex = myService.sex;
            });
            //自定义service服务,,通过this
            app.service("$a",function(){
                
                this.name = "张三";
                this.sex = "女";
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <p>自定义service服务：{{name}}</p>
    </body>
</html>




/

factory服务


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../angular/angular.js" ></script>
        <script>
            var a = 20;
            
            var app = angular.module("myApp",[]);
            app.controller("myCtrl",function($scope,$myFactory){
                $scope.name = $myFactory.name;
                //$scope.age = $myFactory.age;
                $scope.newAge;
                
                $scope.fun = function(){
                    $myFactory.setAge($scope.newAge);
                    $scope.age = $myFactory.getAge();
                }
            });
            
            //通过调用factory函数自定义服务
            /*app.factory("$myFactory",function(){
                var student = {};
                student.age = a;
                student.name = "张三";
                return student;
            });*/
            
            //通过调用factory函数自定义服务,,在外面$myFactory代表student
            
            app.factory("$myFactory",function(){
                var student = {};//创建一个空对象，返回这个对象
                var age;//定义随便一个私有变量
                //给student对象设置方法，这个方法可以直接被student对象调用。
                //通过操作这个方法，操作私有化变量。
                student.setAge = function(newAge){
                    age = newAge;
                }
                student.getAge = function(){
                    return age;
                }
                student.name = "张三";//直接给对象属性赋值，赋好的值，可以直接通过对象名.属性名获取。
                return student;
            });
            
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="number"  ng-model="newAge"/>
        <button ng-click="fun()">点击查看年龄</button>
        {{name +":"+age}}
    </body>
</html>



/

orderBy排序


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/angular.js" ></script>
        <script>
            var app = angular.module("myApp",[]);
            //创建控制器
            app.controller("myCtrl",function($scope){
                //准备数据
                var date1 = new Date("2017-11-20 09:32:21");
                var date2 = new Date("2017-11-20 10:32:21");
                var date3 = new Date("2017-11-20 11:11:11");
                $scope.goods = [{
                    name:"云南白药",
                    num:100,
                    address:"云南",
                    price:19.9,
                    date:date1
                },{
                    name:"999感冒灵",
                    num:30,
                    address:"北京",
                    price:12.5,
                    date:date2
                },{
                    name:"感康片",
                    num:20,
                    address:"河北",
                    price:16.6,
                    date:date3
                }];
                
                $scope.orderKey = "";
                
                $scope.thClick = function(ele){
                    $scope.orderKey = ele;
                };
                
            });
            
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        排序规则：<select ng-model="orderKey">
            <option value="num">按数量升序</option>
            <option value="-num">按数量降序</option>
            <option value="date">按日期升序</option>
            <option value="-date">按日期降序</option>
            <option value="price">按价格升序</option>
            <option value="-price">按价格降序</option>
        </select>
        <table border="1">
            <thead>
                <th>名字</th><th ng-click="thClick('num')">数量</th><th>地址</th><th>价格</th><th ng-click="thClick('date')">日期</th>
            </thead>
            <tbody>
                <tr ng-repeat="g in goods | orderBy:'-num' |orderBy:orderKey">
                    <td>{{g.name}}</td>
                    <td>{{g.num}}</td>
                    <td>{{g.address}}</td>
                    <td>{{g.price | currency:"￥"}}</td>
                    <td>{{g.date | date:"yyyy-MM-dd hh:mm:ss"}}</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>




///

myFactory

factory服务


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.js" ></script>
        <script>
            var app = angular.module("myApp",[]);
            app.controller("myCtrl",function($scope,$myFactory,myservice,myprovider){
                $scope.address1="北京" ;
                $scope.str ;
                
                $scope.name1 = $myFactory.sname;
                $scope.age1 = $myFactory.sage;
                $scope.fun = function(){
                    $myFactory.setAddress($scope.address1);
                    $scope.str = $myFactory.getAddress();
                }
                
                $scope.name2 = myservice.sname;
                $scope.age2 = myservice.sage;
                
                
                $scope.carname = myprovider.cname;
                $scope.carprice = myprovider.cprice;
                
                $scope.num1 =1;
                $scope.num2 =2;
                $scope.result = myservice.add($scope.num1,$scope.num2);
                
            });
            //自定义factory服务,提供一个学生对象数据
            app.factory("$myFactory",function(){
                var student = {};
                var address;
                student.sname = "张三";
                student.sage = 20;
                student.setAddress = function(newAddress){
                    address = newAddress;
                }
                student.getAddress = function(){
                    return address;
                }
                return student;
            });
            app.service("myservice",function(){
                this.sname="李四";
                this.sage = 30;
                this.add = function(x,y){
                    return x+y;
                }
            });
            app.provider("myprovider",function(){
                this.$get=function(){
                    var car = {};
                    car.cname = "宝马x3";
                    car.cprice = "300000";
                    return car;
                }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="text" ng-model="address1" /><span>{{str}}</span><input type="button" value="查看地址" ng-click="fun();" />
        学生姓名1：{{name1}},年龄1：{{age1}}<br />
        学生姓名2：{{name2}},年龄2：{{age2}}<br />
        汽车名字3：{{carname}},价钱3：{{carprice}}<br />
        <br />
        <input type="number"  ng-model="num1"/>+<input type="number"  ng-model="num2"/>=<span>{{num1+num2}}</span>
        
    </body>
</html>




//

三级省市联动


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.js" ></script>
        <script>
            var app = angular.module("myApp",[]);
            app.controller("myCtrl",function($scope){
                $scope.proList =[
                    {
                        "amode":"河南",
                        "citys":[
                                    {"name":"郑州",
                                     "area":[{"aname":"郑1区"},{"aname":"郑2区"}]
                                    },
                                    {"name":"开封",
                                     "area":[{"aname":"开1区"},{"aname":"开2区"}]
                                    }
                                ]
                    },
                    {
                        "amode":"河北",
                        "citys":[
                                    {"name":"石家庄",
                                     "area":[{"aname":"石1区"},{"aname":"石2区"}]
                                    },
                                    {"name":"邯郸",
                                    "area":[{"aname":"邯1区"},{"aname":"邯2区"}]
                                    }
                        ]
                    }
                ];
                $scope.str="我是一个无用的属性";
               
               $scope.proChange = function(){
                       $scope.select2 = $scope.select1.citys[0];
                       $scope.select3 = $scope.select2.area[0];
               }
               $scope.cityChange = function(){
                       $scope.select3 = $scope.select2.area[0];
               }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        
        <div>
            <select style="width: 120px;" ng-init="select1=proList[0]" ng-model="select1" ng-change="proChange();" ng-options="item.amode for item in proList"></select>
            <select style="width: 120px;" ng-init="select2=select1.citys[0]" ng-change="cityChange();" ng-model="select2" ng-options="data1.name for data1 in select1.citys"></select>
            <select style="width: 120px;" ng-init="select3=select2.area[0]" ng-model="select3" ng-options="a.aname for a in select2.area"></select>
        </div>
    </body>
</html>



//


provider服务


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../angular/angular.js" ></script>
        <script>
            var app = angular.module("myApp",[]);
            app.controller("myCtrl",function($scope,myProvider){
                $scope.food = myProvider.food;
            });
            //自定义provider服务
            app.provider("myProvider",function(){
                this.$get = function(){
                    var result = {};
                    result.food = "唐僧肉";
                    return result;
                };
            });
            
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        我想吃：{{food}}
    </body>
</html>



select服务


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../angular/angular.js" ></script>
        <script>
            var app = angular.module("myApp",[]);
            app.controller("myCtrl",function($scope,$a){
                $scope.name = myService.name;
                $scope.sex = myService.sex;
            });
            //自定义service服务,,通过this
            app.service("$a",function(){
                
                this.name = "张三";
                this.sex = "女";
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <p>自定义service服务：{{name}}</p>
    </body>
</html>





Guiyide
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于AngularJs + Bootstrap + AngularStrap 省市区联动实践
04-30
NULL 博文链接：https://bijian1013.iteye.com/blog/2392683
angularJS省市联动
gh323093的博客
11-21 450
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> #sub{ background: chartreuse; width: 80px; height: 30
AngularJS orderBy 使用要点
Vin1992的博客
08-28 1623
AngularJS orderBy 使用要点总结：　　1，书写格式基本应用格式为：ng-repeat=”item in itemList | orderBy:p1:p2” 参数p1可以是字段名或自定义函数，p2指是否逆序，默认是false举例：假设$scope中有$scope.itemList=[{id:201,name:’abc’,amount:100},{id:100,name:’zdb’,a
angular中的orderBy过滤器使用
weixin_34149796的博客
11-15 172
一 orderBy过滤器 AngularJS中orderBy进行排序，第一个参数可以有三种类型，分别为：function,string,array: 第一种:function,如果是function,那么function函数会遍历待排序的数组，并将返回的结果作为angular库函数中comparator的参数，进行比较排序。 第二种：如果是字符串，假如待排序的数组为对象，...
angular2 table pipe ---orderby
chixian4839的博客
10-27 146
import {Pipe, PipeTransform} from "@angular/core"; @Pipe({ name: 'orderBy' }) export class OrderByPipe implements PipeTransform { transfo...
angular.js实现列表orderby排序的方法
10-17
今天小编就为大家分享一篇angular.js实现列表orderby排序的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
10-18
主要介绍了Angular实现的内置过滤器orderBy排序与模糊查询功能,涉及AngularJS过滤器、排序及字符串遍历、查询等相关操作技巧,需要的朋友可以参考下
Angular实现的table表格排序功能完整示例
10-18
主要介绍了Angular实现的table表格排序功能,结合完整实例形式分析了AngularJS表格排序所涉及的事件响应、元素遍历、属性修改等相关操作技巧,需要的朋友可以参考下
angular过滤器实现排序功能
12-29
本文实例为大家分享了angular过滤器排序的具体代码，供大家参考，具体内容如下 首先定义一个json文件：   然后写HTML文件： <!--第一个下拉框--> <select ng-model=a> 按照年龄排序 按照编码...
angular2 pipe orderby(二)
chixian4839的博客
10-27 156
import {Pipe, PipeTransform} from "@angular/core"; @Pipe({name: 'orderBy', pure: false}) export class OrderBy implements PipeTransform { valu...
Angular内置过滤器+orderBy排序+模糊查询
dangai0201的博客
09-08 655
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; } table{ margin: 100px auto
AngularJS使用orderBy报错
游海东的技术专栏
08-05 1670
1、错误描述2、错误原因3、解决办法
巧用Deklarit中DataProvider的Order属性进行动态排序
weixin_30375427的博客
05-08 59
1.查看DataProvider生成DataAdapter的类代码，其中有下面三个private成员和一个public属性用做排序 privatestringorderString; //正序，根据用户设置的排序顺序 privatestringreverseOrderString;//反序，与用户设置的排序顺序相反...
ionic2 angular2自定义pipe ，orderby实现排序
兰色的fire
01-05 5823
ionic2项目开发中，我们会用到排序功能，原以为angular2和angular1中一样，结果不能用啊 官网是这么说的： https://angular.io/docs/ts/latest/guide/pipes.html#!#no-filter-pipe "Some of us may not care to minify this aggressively. That's ou
angular.js实现列表orderby排序
菜刀居士的专栏
04-05 2万+
ng-app>     order by                          ng-controller="demoController">                                       编号             国家             名称              年龄           
angularJs中orderBy筛选以及filter过滤数据
泠泠似水
05-31 3354
<div ng-app="module" ng-controller="ctrl"> <!--按照click降序排序--> {{data|orderBy:'click':true}}<br> <!--按照id升序排序--> {{data|orderBy:'id':false}}<br> <!--筛选匹配3的数据--> {{data|filter:'3'}}
html js不触发_原生JS简单快速实现省市区三级联动（含行政代码code）
weixin_39517400的博客
11-21 389
准备工作省市区三级联动所需文件：评论回复区文件说明：整个文件为一个大的对象(非数组类型)其中对象的属性名 100000 中包含所有省份，它也是一个对象格式的；对象名为100000的每个属性中的属性名都为数字类型(其实是该地区的行政代码)。数字属性名对应的属性值是该地区的名称,同时也可以通过该属性名访问到它下级的市列表。eg:import districts from './js/districts...
order by同时根据两个条件排序
热门推荐
一言的博客
11-20 3万+
order by可以按一个或多个（最多16个）字段排序查询结果，可以是升序（ASC）也可以是降序（DESC），如果缺省，则是升序。 order by中如果定义了多个字段，则按照字段的先后顺序排序。 order by通常放在SQL语句的最后。 例：按照类别升序和时间降序查询音乐类别和上传时间 select IndexId,updatetime2 from tb_MusicInfo
angular+clarity实现省、市、区/县三级联动
qq_44749866的博客
03-29 529
angular+clarity实现省、市、区/县三级联动省市区三级联动实现效果htmltsjson备注 省市区三级联动实现效果 html <clr-select-container> <label>省</label> <select clrSelect name="provice" [(ngModel)]="provice" (ngModelChange)=provicechange()>
angular双重排序
最新发布
05-30
Angular中可以使用Array.sort()方法来对数组进行排序，可以根据需要进行双重排序。例如，我们有一个包含对象的数组，每个对象都有两个属性：name和age。我们想要按照name属性进行首次排序，然后按照age属性进行第二...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值