angularJS 数组更新时重新排序之解决方案一：这个坑，绕开吧，不跳了…… - 放羊的星星bky - 博客园
随笔 - 38, 文章 - 0, 评论 - 1, 引用 - 0
今天产品大人发现了一bug，图表数据和数据库总是对不上，原因是当前端更新数组时，angularJS默认对数组进行了排序。
<span style="color: # // 点击事件：input复选框
<span style="color: #
$scope.fnClickUpdateAreas = function ($event,areaCode,areaName) {
<span style="color: #
if ($event.target.checked) {
<span style="color: #
$scope.areaCodes.push(areaCode);
<span style="color: #
$scope.areaNames.push(areaName);
<span style="color: #
<span style="color: #
当再次更新areaCodes和areaNames时，发现areaCodes自动排序了，和areaNames无法一一对应了，原因很简单，areaCodes是数字，而areaNames是文字。一直在找怎么阻止angularJS自动排序的方案，结果没找到，结果只能用以下办法解决了：
1 // 点击事件：input复选框
$scope.fnClickUpdateAreas = function ($event,areaCode,areaName) {
// 更新service中的地区代码数组
if ($event.target.checked) {
$scope.areas.push(
'name': areaName,
'code': areaCode
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
service.areaCodes = [];
<span style="color: #
service.areaNames = [];
<span style="color: #
for (var i = 0; i & $scope.areas. i++) {
<span style="color: #
service.areaCodes.push($scope.areas[i].code);
<span style="color: #
service.areaNames.push($scope.areas[i].name);
<span style="color: #
<span style="color: #
<span style="color: #[Angularjs]排序中的日期 angular
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.
我想要在日期排序 angular js
orderBy:predicate :reverse
&div class="list" ng-repeat="user in Stores| orderBy:predicate:reverse"&
我的 js 有以下
$scope.predicate = 'date';
$scope.reverse =
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse :
$scope.predicate =
My HTML for sorting date is
&div class="col-xs-3 col-lg-3 heading-date headerStyle"&
&b class="date-heading" ng-click="order('CreatedDate')"&Date&/b&
&span class="sortorder"
ng-show="predicate === 'CreatedDate'"
ng-class="{reverse:reverse}"&&/span&
我想要日期以相反的顺序排序。如何做排序日期在 Angular js？
解决方法 1:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
app.controller('ExampleController', ['$scope', '$filter', function($scope, $filter) {
var orderBy = $filter('orderBy');
$scope.Stores = [
{ name: 'John',
phone: '555-1212',
age: 'T00:00:00.000Z' },
{ name: 'Mary',
phone: '555-9876',
age: 'T00:00:00.000Z' },
{ name: 'Mike',
phone: '555-4321',
age: 'T00:00:00.000Z' },
{ name: 'Adam',
phone: '555-5678',
age: 'T00:00:00.000Z' },
{ name: 'Julie',
phone: '555-8765',
age: 'T00:00:00.000Z' }
$scope.order = function(predicate) {
$scope.predicate =
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse :
$scope.friends = orderBy($scope.friends, predicate, $scope.reverse);
$scope.order('age', true);
HTML 的一部分 ︰
&html ng-app="plunker"&
&meta charset="utf-8" /&
&title&AngularJS Plunker&/title&
&script&document.write('&base href="' + document.location + '" /&');&/script&
&link rel="stylesheet" href="style.css" /&
&script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"&&/script&
&script src="app.js"&&/script&
&body ng-controller="ExampleController"&
&pre&Sorting predicate = {{predicate}}; reverse = {{reverse}}&/pre&
&table class="friend"&
&button ng-click="order('name')"&Name&/button&
&span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"&&/span&
&button ng-click="order('phone')"&Phone Number&/button&
&span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"&&/span&
&button ng-click="order('age')"&Age&/button&
&span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"&&/span&
&tr ng-repeat="user in Stores|orderBy:predicate:reverse"&
&td&{{user.name}}&/td&
&td&{{user.phone}}&/td&
&td&{{user.age | date:'d MMM yyyy'}}&/td&
这里是呆瓜的环节 ︰
你可以保留作为 ISO 8601 字符串的自然排序并使用角的日期筛选器来显示日期的日期。
由 vojtajina 发现一个好的例子。这里是 jsfiddle 的。本文实例为大家分享了Angularjs过滤器完成排序的具体代码，供大家参考，具体内容如下
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
&script type="text/javascript" src="js/angularjs.js" &&/script&
&link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" /&
angular.module('myApp',[])
.service('data',function(){
{id:1234,name:'ipad',price:3400},
{id:1244,name:'aphone',price:6400},
{id:1334,name:'mypad',price:4400},
{id:8234,name:'zpad',price:8400}
.controller('myController',function($scope,data){
$scope.data=
$scope.change=function(order){
//$scope.orderType='';
$scope.order=
if($scope.orderType==''){
$scope.orderType='-';
$scope.orderType='';
.red{color:}
&body ng-app="myApp"&
&div ng-controller="myController" class="container"&
&nav class="navbar navbar-default"&
&div class="container-fluid"&
&div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&
&form class="navbar-form navbar-left"&
&div class="form-group"&
&input type="text" class="form-control" ng-model="search" placeholder="Search"&
&/div&&!-- /.navbar-collapse --&
&/div&&!-- /.container-fluid --&
&table class="table table-bordered table-hover"&
&th ng-click="change('id')" ng-class="{dropup:orderType==''}"&id&span ng-class="{red:order=='id'}" class="caret"&&/span&&/th&
&th ng-click="change('name')" ng-class="{dropup:orderType==''}"&name&span ng-class="{red:order=='name'}" class="caret"&&/span&&/th&
&th ng-click="change('price')" ng-class="{dropup:orderType==''}"&price&span ng-class="{red:order=='price'}" class="caret"&&/span&&/th&
&tr ng-repeat="x in data | filter:search | orderBy:orderType+order "&
&td&{{x.id}}&/td&
&td&{{x.name}}&/td&
&td&{{x.price}}&/td&[Java教程]angularJS 数组更新时重新排序之解决方案一：这个坑，绕开吧，不跳了……
你的位置：
[Java教程]angularJS 数组更新时重新排序之解决方案一：这个坑，绕开吧，不跳了……
angularJS 数组更新时重新排序之解决方案一:这个坑,绕开..._博客园angularJS 数组更新时重新排序之解决方案一:这个坑,绕开吧,不跳了……今天产品大人发现了一bug,图表数据和数据库总是对不上,原因是当前端更新数组时,a...angularJS 数组更新时重新排序之解决方案一:这个坑,绕开..._阿里云以上是angularJS 数组更新时重新排序之解决方案一:这个坑,绕开吧,不跳了……Script的内容,更多 绕开 数组 AngularJs 排序 解决方案 重新 这个 更新 的...移动web开发之rem响应式设计 - 放羊的星星bky - 博客园根据移动设备屏幕大小对变$base_fontSize重新赋值,并对html字体大小重新赋值为1...下一篇:angularJS 数组更新时重新排序之解决方案一:这个坑,绕开吧,...AngularJS操作数组 - CSDN博客angularJS的数组操作的方法 1.数组的创建 有以下三种方法 (1)
var arrayObj = new Array(); //创建一个数组 (2)
var arrayObj = new Array([...angularjs怎么更新json数组_百度知道1个回答 - 提问时间: 日要遍历这个json对象吧 var array = []; for(var item in response){ array.push(JSON.stringify(item.id)); } $scope.array =更多关于angularJS 数组更新时重新排序之解决方案一:这个坑,绕开吧,不跳了……的问题Angular.js中数组操作的方法教程_AngularJS_脚本之家最近在学习Angular.js,将自己学习的一些经验技巧分享给大家,下面本文将给大家介绍关于Angular.js中数组操作的相关资料,话不多说了,来一起看看详细的介...自己写的angularJs排序指令【原创】 - 何jason - 博客园} //提供方法,在item生成的时候,将值放入lists中 ...排序数组中的排序条件 orderReverse: #39;=#39;,//排序...5. angularJs中ngModel的坑(1)Copyright (C)201...AngularJS 常见面试问题 - 前端修炼之道 - SegmentFault 思否limitTo(限制数组或字符串长度) orderBy(排序) lower...双向数据绑定是 AngularJS 的核心机制之一。当 view...个坑(就是上文中 ng-if 产生一级作用域...AngularJs 基础教程 (二十) 数组去除重复项算法_飞一样..._新浪博客本文为H5EDU机构官方的HTML5培训教程,AngularJs 基础教程,AngularJs 教程方法一 1.先将原数组进行排序 2.检查原数组中的第i个元素 与结果数组中的最后...AngularJS排序依据数组索引 - IT屋-程序员软件开发技术分享社区本文地址:IT屋 >> AngularJS orderBy array index 问题 我有一个NG重复,看...解决方案 您可以不依赖对象的订单,它没有定义。事实上,排序依据过滤器应...angularjs 中怎样判断一个元素是否在一个数组中存在_百度知道3个回答 - 提问时间: 日[]判断数组中是否包含某个元素 Array.prototype.S=String.fromCharCode(2); Array.prototype.in_array=function(e){ var r=new RegExp(this.S+e+this...更多关于angularJS 数组更新时重新排序之解决方案一:这个坑,绕开吧,不跳了……的问题angularjs学习总结 详细教程 - CSDN博客这里肯定有更好的解决方案!那就是AngularJS的双向数据...我们使用ng-repeat指令来循环图片数组并且加入img模板...例如获取一个数组中的子集,对数组中...AngularJS遍历数组由于数组元素重复导致的错误解决方案 - CSDN博客默认在ng-repeat的时候每一个item都要保是唯一的,否则console就会打出error...angularJS中repeat的数组数据不能出现重复项,代码本应该是这样的:解决...angularjs项目需要从一个页面跳转到另一个页面,同时需要传递一个...{}; // 定义ponents数组,数组包括街道,城市,...监听变量,否则参数改变时,获取变量的一端不会更新。...AngularJS 自然提供了多种解决方案,以应对不同的应用...angularjs 数据列表中数据更新以后的排序问题 - ode技术社区angularjs 数据列表中数据更新以后的排序问题 ...Array: An array of function or string predicates...换成 ngresource也是一样 ,有什么法可以让Data...AngularJS 中的一些坑 - 文章 - 伯乐在线最近几个月频繁的跟AngularJS打交道,对于web应用开发来说Angular真的是一个神奇...这个数组语法很好的解决了这个问题。我的建议是从现在开始照这个方...Android之父_实现数组随机排序(AngularJS) - 简书Android之父_实现延时(AngularJs) _帅的掉渣 JavaScript-如何实现数组的随机排序? 第一种方法。 Math.random()返回介于 0(包含) ~ 1(不包含) 之间的...当模型元素与模型数组拼接时,AngularJS:ng-repeat列表不会更新...当模型元素与模型数组拼接时,AngularJS:ng-repeat列表不会更新如何解决? 写回答 2 个回答 热门排序 时间排序 热门排序 74学生回答于...angularjs中如何把用户输入的许多input值放入一个数组中(不用dom...angularjs中如何把用户输入的许多input值放入一个数组中(不用dom操作的方法) angularjs 我想把用户输入的值,存入一个数组中,然后发给后台,可是我该怎...AngularJS遍历数组由于数组元素重复导致的错误解决方案默认在ng-repeat的时候每一个item都要保是唯一的,否则console就会打出error...相关TAG标签 AngularJS AngularJ教程 遍历数组 错误解决方案 上一篇:J...、 、 、 、 、 、
今天产品大人发现了一bug，图表数据和数据库总是对不上，原因是当前端更新数组时，angularJS默认对数组进行了排序。1 // 点击事件：input复选框2
$scope.fnClickUpdateAreas = function ($event,areaCode,areaName) {3
if ($event.target.checked) {4
$scope.areaCodes.push(areaCode);5
$scope.areaNames.push(areaName);6
}查看代码当再次更新areaCodes和areaNames时，发现areaCodes自动排序了，和areaNames无法一一对应了，原因很简单，areaCodes是数字，而areaNames是文字。一直在找怎么阻止angularJS自动排序的方案，结果没找到，结果只能用以下办法解决了： 1 // 点击事件：input复选框 2
$scope.fnClickUpdateAreas = function ($event,areaCode,areaName) { 3
// 更新service中的地区代码数组 4
if ($event.target.checked) { 5
$scope.areas.push( 6
'name': areaName, 8
'code': areaCode 9
service.areaCodes = [];14
service.areaNames = [];15
for (var i = 0; i & $scope.areas. i++) {16
service.areaCodes.push($scope.areas[i].code);17
service.areaNames.push($scope.areas[i].name);18 19
}查看代码&AngularJS 过滤与排序详解及实例代码_AngularJS
作者：用户
本文讲的是AngularJS 过滤与排序详解及实例代码_AngularJS，
前面了解了AngularJS的使用方法，这里就简单的写个小程序，实现查询过滤以及排序的功能。
本程序中可以了解到：
　　1 angularjs的过滤器
　　2 ng-repeat的使用方法
　　3 控制器的使用
　　4 数据的绑定
前面了解了AngularJS的使用方法，这里就简单的写个小程序，实现查询过滤以及排序的功能。
本程序中可以了解到：
　　1 angularjs的过滤器
　　2 ng-repeat的使用方法
　　3 控制器的使用
　　4 数据的绑定
　　程序设计分析
　　首先，如果要是先查询过滤，就要使用到AngularJS中的 过滤器filter 了。
　　直接在表达式的后面使用管道命令符 | ，按照下面的写法就可以达到一个过滤的效果：
{{ persons | filter:query }}
　　通过使用filter实现过滤操作，query是查询过滤时输入的字符串。
　　类似地，使用orderBy就可以实现排序的功能：
{{ persons | filter:query | orderBy:order }}
　　上面的查询以及排序涉及到两个变量，query和order。在这里直接使用ng-model实现数据的绑定即可：
Search:&input ng-model="query"&
Sort by:&select ng-model="order"&
&option value="name"&name&/option&
&option value="age"&age&/option&
　　AngularJS是一门基于DOM的框架语言，因此不需要实现任何的监听器以及事件触发器，当query所在的输入框发生任何改变时，就会触发输入框与下面的表达式展现的双向刷新！
　　相比于其他的一些框架，是基于字符串通过DOM节点innerHTML添加到DOM中，AngularJS的实现方式加快了模型与视图的展现。并且减少了大量不必要的监听器啊触发器啊之类的代码的编写，真正实现了类似spring的效果~
　　数据的展现，可以通过ng-repeat实现。当网页解析到ng-repeat的时候，会为每一个数组中的元素都克隆一份标签，进行编译解析。　　　
　　　&ul class="persons"&
&li ng-repeat="person in persons | filter:query | orderBy:order"&
{{person.name}}
{{person.age}}
　　剩下的工作就是需要在script中进行perons数组的初始化：
&div ng-controller="ctl"&
&script type="text/javascript"&
function ctl($scope){
$scope.persons = [
{"name":"xingoo","age":25},
{"name":"zhangsan","age":18},
{"name":"lisi","age":20},
{"name":"wangwu","age":30}
$scope.order = "age";
　　代码以及结果
　　最后贴上全部的代码：
&!doctype &
&html ng-app&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"&&/script&
&div ng-controller="ctl"&
Search:&input ng-model="query"&
Sort by:&select ng-model="order"&
&option value="name"&name&/option&
&option value="age"&age&/option&
&ul class="persons"&
&li ng-repeat="person in persons | filter:query | orderBy:order"&
{{person.name}}
{{person.age}}
&script type="text/javascript"&
function ctl($scope){
$scope.persons = [
{"name":"xingoo","age":25},
{"name":"zhangsan","age":18},
{"name":"lisi","age":20},
{"name":"wangwu","age":30}
$scope.order = "age";
　　使用结果：
　　在默认情况下，使用age进行排序：
　　通过选择则可以使用name排序
　　再输入字符的时候，会自动过查询过滤掉一些选项
以上就是对AngularJS 过滤与排序的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索angularjs
过滤与排序
过滤排序详解
过滤和排序实例
angularjs 排序 过滤、angularjs小项目实例、angularjs 项目实例、angularjs 路由实例、angularjs实例demo，以便于您获取更多的相关知识。
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
40+云计算产品，6个月免费体验
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
云服务器9.9元/月，大学必备
云栖社区(yq.aliyun.com)为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！