zoukankan      html  css  js  c++  java
  • AngularJS使用orderBy报错

    1、错误描述



    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>
    


  • 相关阅读:
    自动补全的java封装
    angular创建服务
    forEach和for包含异步调用的区别
    angular获取dom节点
    angular父组件给子组件传值
    angular环境
    SQL Server DBA 30问 【itpub】 天高地厚
    【转】任务管理器各参数说明 天高地厚
    开机引导 天高地厚
    测试发现数据库性能问题后的SQL调优 天高地厚
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314100.html
Copyright © 2011-2022 走看看