基本上,我希望用户能够拖放项目或单击向上/向下箭头来移动列表中的项目.

有没有一种更好的方法来更新与ui-sortable / angular-ui兼容的项目索引?

谢谢.

更新

我们能够通过在控制器中添加一个函数来解决这个问题,该函数将从数组中删除该项并将其添加回一个大于或小于其原始位置的索引中.这是一个草率的例子:

$scope.updown = function(oldindex,newIndex) {
    var item = $scope.list[oldindex];
    $scope.list.splice(oldindex,1);
    $scope.list.splice(newIndex,item);
};

http://jsfiddle.net/69auq/1/

你需要添加一个检查,如果它是数组中的第一个或最后一个elem,相应地禁用向上或向下.

和AngularJS一样,答案是 “think in Angular,not jQuery”.

This CodePen很好地说明了如何做到这一点.基本上,你有一个用于拖动的范围临时对象,然后你可以将其推入ng-repeat的绑定数组.我不能相信它(不是我的创作),但谷歌很快就引导我. CodePen不使用任何外部依赖项,但正如您所看到的,它意味着比使用像Angular-UI这样的东西更多的工作.

这里的a JSFiddle显示了相同的概念,但具有Angular-UI依赖性.使用angular-ui的优点是你的绑定数据数组只需要这样调用:

var myapp = angular.module('myapp',['ui']);

myapp.controller('controller',function ($scope) {
    $scope.list = ["one","two","three","four","five","six"];
});

这意味着你的工作量减少了,因为它已经被弄清楚了. AngularJS在使用jQuery方面做得很好,所以这不应该决定jQuery UI的开发方法的巨大转变,具体取决于你的用例.

angularjs – 手动更新Angular-UI UI可排序项的更多相关文章

  1. 利用Angular+Angular-Ui实现分页(代码加简单)

    这篇文章主要介绍了利用Angular+Angular-Ui实现分页,利用Angular+Angular-Ui实现的分页分页代码更加简单,更加容易懂哦,相信本文的内容对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。

  2. angularjs – 手动更新Angular-UI UI可排序项

    基本上,我希望用户能够拖放项目或单击向上/向下箭头来移动列表中的项目.有没有一种更好的方法来更新与ui-sortable/angular-ui兼容的项目索引?

  3. angularjs – 在angular-ui bootstrap警报中包含链接?

    如何在angular-ui引导程序警报中包含链接?

  4. angularjs – Angular-UI:强制预先输出结果

    我有一个使用AngularUI’stypeaheadfeature的文本字段.它看起来像这样:我想强制用户从生成的列表中选择一个选项.如果他们输入的内容与列表中没有完全相同,则在模糊时,我希望文本字段的值重置为原始值.此功能是typeahead指令的一部分,还是需要扩展它?我在google和stackoverflow上搜索了大约10分钟,但找不到任何相关文档.有谁能指出我正确的方向来实现这一目标?

  5. AngularJS ui-router是否有任何Typescript定义?

    所有应该再次工作资源的小代码片段形式:使用示例

  6. angularjs – 用于angular-ui bootstrap手风琴指令的标题中的复选框

    我仍然很有角度,所以这可能是一个基本问题,但我还没有弄明白.如何将一个复选框放入一个angular-ui手风琴的标题中?

  7. Angular-ui工具提示与HTML

    我正在我的应用程序中添加一些引导工具提示.所有的“正常”工具提示都可以,但是当我想使用tooltip-html-unsafe时,我所得到的只是一个空的工具提示.我的工具提示:帮助在DOM中,我有:div的内容似乎是空的,所以在工具提示中没有任何东西可以显示.我试图直接在DOM中添加一些HTML文本,如:test它的工作原理你有想法吗?

  8. angularjs – $scope.myVariable没有在控制器中更新angular-ui引导模态

    在我看来,我有一个输入,一个跨度和一个这样的按钮:当在文本框中键入时,跨度的内容将按预期阅读更新.但是当单击按钮时,phoneNumber在控制器内部没有更新:有没有一些新的错误,你可以做的角度,这使得东西不会更新在控制器内的$范围内?

  9. AngularJS / ui-router:$state.go在ng-click中不起作用

    我有一个视图,我有以下代码:目标是转换到新的状态,而不必使用href.不幸的是,上面的代码不会触发.我还试图在控制器中包含$state以查看此视图:但依然没有.transiction也似乎不起作用.任何人有什么想法如何使这项工作?

  10. anglejs – Angular-UI $对话框和表单提交输入键

    从我可以看到,在AngularJS中处理enter对话框的建议方法是将标签和提交按钮.如果您使用Angular-UI及其$dialog服务,表单将会按Enter键静静地关闭.没有办法拦截.即使您附加处理程序以进行ng-click或ng-submit,表单也将关闭w/o返回任何结果.还有什么我需要做的[编辑]解决它,我不得不明确指出我的“取消”按钮是类型“按钮”.似乎默认为“提交”?所以没有真正的问题,除了我的html表格技能:)回答我自己的问题按钮似乎默认提交(?

随机推荐

  1. Angular2 innerHtml删除样式

    我正在使用innerHtml并在我的cms中设置html,响应似乎没问题,如果我这样打印:{{poi.content}}它给了我正确的内容:``但是当我使用[innerHtml]=“poi.content”时,它会给我这个html:当我使用[innerHtml]时,有谁知道为什么它会剥离我的样式Angular2清理动态添加的HTML,样式,……

  2. 为Angular根组件/模块指定@Input()参数

    我有3个根组件,由根AppModule引导.你如何为其中一个组件指定@input()参数?也不由AppModalComponent获取:它是未定义的.据我所知,你不能将@input()传递给bootstraped组件.但您可以使用其他方法来做到这一点–将值作为属性传递.index.html:app.component.ts:

  3. angular-ui-bootstrap – 如何为angular ui-bootstrap tabs指令指定href参数

    我正在使用角度ui-bootstrap库,但我不知道如何为每个选项卡指定自定义href.在角度ui-bootstrap文档中,指定了一个可选参数select(),但我不知道如何使用它来自定义每个选项卡的链接另一种重新定义问题的方法是如何使用带有角度ui-bootstrap选项卡的路由我希望现在还不算太晚,但我今天遇到了同样的问题.你可以通过以下方式实现:1)在控制器中定义选项卡href:2)声明一个函数来改变控制器中的散列:3)使用以下标记:我不确定这是否是最好的方法,我很乐意听取别人的意见.

  4. 离子框架 – 标签内部的ng-click不起作用

    >为什么标签标签内的按钮不起作用?>但是标签外的按钮(登陆)工作正常,为什么?>请帮我解决这个问题.我需要在点击时做出回复按钮workingdemo解决方案就是不要为物品使用标签.而只是使用divHTML

  5. Angular 2:将值传递给路由数据解析

    我正在尝试编写一个DataResolver服务,允许Angular2路由器在初始化组件之前预加载数据.解析器需要调用不同的API端点来获取适合于正在加载的路由的数据.我正在构建一个通用解析器,而不是为我的许多组件中的每个组件设置一个解析器.因此,我想在路由定义中传递指向正确端点的自定义输入.例如,考虑以下路线:app.routes.ts在第一个实例中,解析器需要调用/path/to/resourc

  6. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  7. 角度5模板形式检测形式有效性状态的变化

    为了拥有一个可以监听其包含的表单的有效性状态的变化的组件并执行某些组件的方法,是reactiveforms的方法吗?

  8. Angular 2 CSV文件下载

    我在springboot应用程序中有我的后端,从那里我返回一个.csv文件WheniamhittingtheURLinbrowsercsvfileisgettingdownloaded.现在我试图从我的角度2应用程序中点击此URL,代码是这样的:零件:服务:我正在下载文件,但它像ActuallyitshouldbeBook.csv请指导我缺少的东西.有一种解决方法,但您需要创建一个页面上的元

  9. angularjs – Angular UI-Grid:过滤后如何获取总项数

    提前致谢:)你应该避免使用jQuery并与API进行交互.首先需要在网格创建事件中保存对API的引用.您应该已经知道总行数.您可以使用以下命令获取可见/已过滤行数:要么您可以使用以下命令获取所选行的数量:

  10. angularjs – 迁移gulp进程以包含typescript

    或者我应该使用tsc作为我的主要构建工具,让它解决依赖关系,创建映射文件并制作捆绑包?

返回
顶部