AngularJS使用orderBy报错
2016-08-05 15:39
246 查看
1、错误描述
![](http://img.blog.csdn.net/20160805153819074?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
2、错误原因
3、解决办法
2、错误原因
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var app = angular.module("myApp",[]); app.controller("ctrl",function($scope,$location){ $scope.firstname = "张"; $scope.lastname = "三丰"; $scope.upper = "Hello,World!"; $scope.fullName = function(){ return $scope.firstname + $scope.lastname; } $scope.names = [ {name:"zhangsan",age:12,sex:"男"}, {name:"lsi",age:27,sex:"女"}, {name:"wangwu",age:22,sex:"男"} ]; $scope.myUrl = $location.absUrl(); }); </script> </head> <body> <div ng-app="myApp" ng-controller="ctrl"> 姓:<input type="text" ng-model="lastname" /><br> 名:<input type="text" ng-model="firstname" /><br> 姓名:{{firstname+lastname}}<br> 全名:{{fullName()}}<br> 大写:{{upper | uppercase}}<br> 小写:{{upper | lowercase}}<br> <ul> <li ng-repeat="x in names | orderBy:'age'"> {{x.name+","+x.age+","+x.sex}} </li> </ul><br> {{myUrl}} </div> </body> </html>在实现对无序列表按照“age”字段排序,出现错误;由于“orderBy:”后面用了中文字符导致出错
3、解决办法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script> var app = angular.module("myApp",[]); app.controller("ctrl",function($scope,$location){ $scope.firstname = "张"; $scope.lastname = "三丰"; $scope.upper = "Hello,World!"; $scope.fullName = function(){ return $scope.firstname + $scope.lastname; } $scope.names = [ {name:"zhangsan",age:12,sex:"男"}, {name:"lsi",age:27,sex:"女"}, {name:"wangwu",age:22,sex:"男"} ]; $scope.myUrl = $location.absUrl(); }); </script> </head> <body> <div ng-app="myApp" ng-controller="ctrl"> 姓:<input type="text" ng-model="lastname" /><br> 名:<input type="text" ng-model="firstname" /><br> 姓名:{{firstname+lastname}}<br> 全名:{{fullName()}}<br> 大写:{{upper | uppercase}}<br> 小写:{{upper | lowercase}}<br> <ul> <li ng-repeat="x in names | orderBy:'age'"> {{x.name+","+x.age+","+x.sex}} </li> </ul><br> {{myUrl}} </div> </body> </html>
相关文章推荐
- AngularJS与服务器交互
- AngularJS学习之$q和promise介绍
- AngularJS学习之ng-if嵌套ng-model变量冲突解决
- AngularJS学习之Controller控制器之间的通信
- AngularJS学习之angular.extend用法实例
- Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
- angularjs 表单校验
- angularjs 指令2
- angularjsFileUpload+Springmvc上传文件
- WebStorm 最新 2016 AngularJs 2 代码提示插件安装
- Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
- Angularjs使用directive自定义指令实现attribute继承的方法详解
- Angularjs的ng-repeat中去除重复数据的方法
- AngularJS在IE下取数据总是缓存问题的解决方法
- Lazyload Angular
- Angular 监听路由变化
- 前端构建利器:AngularJS + Bower + Grunt
- hightCharts图表+angularJS+实时动态显示数据
- angularjs 标签指令
- angular change the url , prevent reloading