AngularJS中如何去掉 ng-repeat的自动排序_百度知道
AngularJS中如何去掉 ng-repeat的自动排序
2.in无论如何都会按照number的大小排序。
Angular可能会做一些内部排序，for. 对于类型是number或可转换为整数number的string类型的key. 对于alphanumerical string类型的key，对于你这种年份的use case.in会按照定义object时的key顺序排列.。所以少年1，但是你也看出来了。即使你是JS ninja.，写出一段高深莫测的代码，你以后自己看到了都会想我艹这什么鬼.，然后手动order吧，这类似于数组的行为.，还是乖乖地改成数组，依靠object key实现排序的做法是不可靠的，for
知道智能回答机器人
我是知道站内的人工智能，可高效智能地为您解答问题。很高兴为您服务。
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁首先说明一下功能需求：当点击一次增加按钮的时候，下方就会多一行输入框；当点击一次删除按钮的时候，所点击的删除按钮那行的输入框会消失；当点击打印信息按钮的时候，把所有输入框中的数据读取出来，并打印到控制台上。由此可看出，带有删除按钮的这部分DIV是动态的。现在使用的是angularjs框架，那我们该如何去实现这样的功能呢？angularjs有个很强大的功能，那就是双向数据绑定；由此可以知道，我们就是要使用双向数据绑定的特性来实现它。思路是这样的：通过维护数组的方式来实现。首先在angular控制器中创建一个数组，像这样：$scope.showVBs = [];当点击一次增加按钮的时候，就执行一次下方的方法：$scope.BDetailsAdd = function(){
$scope.showVBs.push({});
}当点击一次删除按钮的时候，就执行一次下方的方法：$scope.BDetailsAdd = function(Count){
$scope.showVBs.splice(Count, 1);
}当点击一次打印按钮的时候，就执行一次下方的方法:通过遍历数组，取出里面的值&p&&span style=&font-family: 'Anonymous Pro';&&&span style=&font-size:12&&$scope.printInfo = function () {&/span&&/span&&/p&&pre name=&code& class=&html&&&span style=&font-size:12&&
for (var i = 0; i & $scope.showVBs. i++) {
console.log($scope.showVBs[i]);
};&/span&html的代码如下：
&div class=&row
panel panel-default panel-body&&
&div class=&col-md-offset-1 panel panel-default&&
&label&{{'Details'}}&/label&
&input type=&button& class=&btn btn-info& value=&增加& ng-click=&BDetailsAdd()&&
&input type=&button& class=&btn btn-danger& value=&打印信息& ng-click=&printInfo()&&
&div class=&vBaggages& ng-repeat=&vba in showVBs&&
&div class=&form-group col-md-2 col-md-offset-1&&
&input type=&button& class=&btn btn-info& value=&删& ng-click=&BDetailsDel($index)&&
&input type=&text& class=&form-control pull-right& ng-model=&vba.Tag&
placeholder=&Tag& style=&width:70%&&
&div class=&form-group col-md-2 col-md-offset-1&&
&input type=&text& class=&form-control pull-right& ng-model=&vba.NO&
placeholder=&No.&&
&div class=&form-group col-md-5 col-md-offset-1&&
&input type=&text& class=&form-control pull-right& ng-model=&vba.remarks&
placeholder=&Remarks&&
&/div&完整的源码：&!docype html&
&%@ page c/charset=UTF-8& language=&java& %&
&html ng-app=&App&&
&title&index&/title&
&link rel=&stylesheet& href=&script/bootstrap/css/bootstrap.min.css&&
&script type=&text/javascript& src=&script/angular/angular.min.js&&&/script&
&script type=&text/javascript& src=&script/app/appCtrl.js&&&/script&
&body ng-c
&form role=&form& name=&editForm&&
&div class=&row&&
&div class=&col-md-12&&
&div class=&row
panel panel-default panel-body&&
&div class=&col-md-offset-1 panel panel-default&&
&label&{{'Details'}}&/label&
&input type=&button& class=&btn btn-info& value=&增加& ng-click=&BDetailsAdd()&&
&input type=&button& class=&btn btn-danger& value=&打印信息& ng-click=&printInfo()&&
&div class=&vBaggages& ng-repeat=&vba in showVBs&&
&div class=&form-group col-md-2 col-md-offset-1&&
&input type=&button& class=&btn btn-info& value=&删& ng-click=&BDetailsDel($index)&&
&input type=&text& class=&form-control pull-right& ng-model=&vba.Tag&
placeholder=&Tag& style=&width:70%&&
&div class=&form-group col-md-2 col-md-offset-1&&
&input type=&text& class=&form-control pull-right& ng-model=&vba.NO&
placeholder=&No.&&
&div class=&form-group col-md-5 col-md-offset-1&&
&input type=&text& class=&form-control pull-right& ng-model=&vba.remarks&
placeholder=&Remarks&&
&/body&&/pre&&pre name=&code& class=&html&&/**
* Created by wzs on
var App = angular.module('App', [])
App.controller('EditCtrl', ['$scope', function ($scope) {
//================测试代码段================
$scope.printInfo = function () {
for (var i = 0; i & $scope.showVBs. i++) {
console.log($scope.showVBs[i]);
$scope.showVBs = [{
&Tag&: &Tag1&,
&NO&: &No1&,
&remarks&: &remarks1&
&Tag&: &Tag2&,
&NO&: &No2&,
&remarks&: &remarks2&
$scope.BDetailsAdd = function () {
$scope.showVBs.push({});
$scope.BDetailsDel = function (Count) {
$scope.showVBs.splice(Count, 1);
版权声明：本文为博主原创文章，未经博主允许不得转载。
以上就介绍了AngularJs 在ng-repeat中动态使用ng-model进行双向数据绑定，包括了方面的内容，希望对Javascript教程有兴趣的朋友有所帮助。
本文网址链接：/article/detail_171095.html
上一篇： 下一篇：51146人阅读
AngularJS（4）
“有客户投诉，说在删除指定的某条记录时,结果删掉的却是另外一条记录!”看起来是个很严重的BUG。 有一次我们在工作中碰到了这个问题。 要定位这个BUG非常麻烦, 因为客户也不清楚如何重现这个问题。后来发现这个Bug是由于在&ng-repeat&中使用了&$index&引发的。下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我们从中得到的经验和教训。一个简单动作(action)的列表先来看看一个完整有效的ng-repeat示例。&ul ng-controller=&ListCtrl&&
&li ng-repeat=&item in items&&
{{item.name}}
&button ng-click=&remove($index)&&remove&/button&
对应的控制器(controller)如下:app.controller('ListCtrl', ['$scope', function($scope) {
//items come from somewhere, from where doesn't matter for this example
$scope.items = getItems();
$scope.remove = function(index) {
var item = $scope.items[index];
removeItem(item);
看起来没什么问题,对吗? 这段代码也没有任何特别值得注意的。添加一个过滤器(filter)然后,让我们来做一个小小的修改: 给列表添加一个过滤器。 这是很常见的做法,如果列表很长的话,例如允许用户进行搜索。为了方便起见, 假设我们通过&searchFilter&来查询列表中的记录。&ul ng-controller=&ListCtrl&&
&li ng-repeat=&item in items | searchFilter&&
{{item.name}}
&button ng-click=&remove($index)&&remove&/button&
控制器的代码保持不变。 看起来仍然没有问题,是吧?事实上,有一个bug藏在里面。 如果我不说, 你能找到吗? 如果能找到,你就已经是Angular大牛了.请尽量不要使用&$indexBUG其实是在控制器里面:$scope.remove = function(index) {
var item = $scope.items[index];
removeItem(item);
这里使用了 index参数, 然后就遇到了BUG: 过滤后的索引(indexs)不匹配原始列表的索引。幸运的是,有一个很简单的方法来避免这种问题: 不要使用$index,而改成实际的item对象。&ul ng-controller=&ListCtrl&&
&li ng-repeat=&item in items | searchFilter&&
{{item.name}}
&button ng-click=&remove(item)&&remove&/button&
控制器如下所示:$scope.remove = function(item) {
removeItem(item);
注意, 这里将&remove($index)&改成&remove(item), 并修改了&$scope.remove&函数来直接操作传过来的对象。这个小小的修改就完全避免了刚才的BUG。为了更好地说明问题以及解决方案,请参考&&。从中可以学到什么?第一个教训当然是在使用&$index&要小心一点,因为以某些方式使用时很可能会产生BUG。第二个教训是,请记住类似这样的模式,则可以用更好的做事方式,可以完全避免某些类型的BUG。 我强烈建议大家现在不要使用&$index, 从这种简单的思维转变中,就可以减少代码中的很多BUG。第三个教训是测试并不是什么时候都有用。 即便有自动化测试,也覆盖了足够多的情形, 但对于依赖特定输入的情况,也很容易错过某些BUG。 错误本身并不是每次都会出现,即使你也用过滤来测试。第四个教训是不要破坏抽象 —— 这一点很容易被忽略。理论上&$index&是由&ng-repeat&创建的一个 “模板变量(template variable)”。 这只在 repeat 块里面有意义(并正确起作用)。 当我们将它的值传递到外面时,它就失去了上下文从而不再有效。 如果确实想让它在 repeat 之外依然有效,则必须在控制器中也进行过滤,这就需要一些不是很必要的重复代码。 值得庆幸的是本文中介绍的模式可以用来避免这种情况。GitHub版:原文链接:&原文日期: 翻译日期: 翻译人员:&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1865764次
积分：15109
积分：15109
排名：第478名
原创：89篇
译文：141篇
评论：479条AngularJS中如何去掉 ng-repeat的自动排序_百度知道
AngularJS中如何去掉 ng-repeat的自动排序
我有更好的答案
即使你是JS ninja.. 对于类型是number或可转换为整数number的string类型的key，写出一段高深莫测的代码.，这类似于数组的行为.in无论如何都会按照number的大小排序.. 对于alphanumerical string类型的key，依靠object key实现排序的做法是不可靠的.in会按照定义object时的key顺序排列，还是乖乖地改成数组，然后手动order吧，for。
Angular可能会做一些内部排序。所以少年，for，你以后自己看到了都会想我艹这什么鬼，对于你这种年份的use case。
2.1，但是你也看出来了
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}