- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我在 AngularUI 中使用 Sortable 来管理多个可排序列表。我已经让它工作到我可以轻松地在列表之间移动项目并相应地更新它们相应的模型的程度。但是,如果我包含一个查询过滤器,如果发生以下情况,我会遇到一些问题:
当您拖放时,Sortable 似乎没有考虑过滤器。这是相关的 HTML:
<p>Search: <input ng-model="query" /></p>
<div class="column-wrapper">
<ul ui-sortable="sortableTemplates" ng-model="list1" id="sortable1" class="connectedSortable">
<li ng-repeat="item in list1|filter:query" class="itemBox">{{item.name}}</li>
</ul>
<ul ui-sortable="sortableTemplates" ng-model="list2" id="sortable2" class="connectedSortable">
<li ng-repeat="item in list2|filter:query" class="itemBox">{{item.name}}</li>
</ul>
</div>
以及对应的JS:
var app = angular.module('myApp', ['ui.sortable']);
app.controller('test', function($scope) {
$scope.list1 = [
{name: 'ABC'},
{name: 'DEF'},
{name: 'GHI'}
];
$scope.list2 = [
{name: 'JKL'},
{name: 'MNO'},
{name: 'QRS'}
];
$scope.sortableTemplates = {
connectWith: '.connectedSortable'
}
});
Here it is running on Plunker.
要重现该问题,您可以尝试搜索 GHI
,然后将 GHI
移至 list2。然后,清除搜索框。 ABC
是实际移动到 list2 的元素(因为它是该数组中的第一个元素),而 GHI
保留在列表 1 中。
有没有办法让 sortable 与 Angular 过滤器相处,以便在列表之间排序时保留原始索引?
(我刚开始使用 Angular 和 JQueryUI,所以答案可能很明显。我发现了类似的问题,但似乎没有任何问题可以直接解决这个问题。)
最佳答案
正如您所说,ui-sortable 使用元素索引在列表之间移动它,因此当您移动过滤列表中的第一项时,它会移动原始列表中的第一项。解决这个问题的一种方法是隐藏您不想移动的项目,而不是过滤您的列表,而不是像 ng-repeat 中的过滤器那样创建一个新列表。所以在你的 html 中:
<li ng-repeat="item in list1" class="itemBox" ng-show="visible(item)">{{item.name}}</li>
ng-show 将根据 $scope.visible(item) 返回 true 还是 false 来显示或隐藏元素。因此,我们在我们的 Controller 中创建一个函数,如果我们想要查看元素,即它没有被过滤掉,它返回 true,如果它被过滤掉,则返回 false。
$scope.visible=function(item){
//create an array containing all of the elements in both lists
var lists=$scope.list1.concat($scope.list2);
// filter this list using our search term
var filteredItems=$filter('filter')(lists, $scope.query);
//if there are no matching items left in our list then return false
if (filteredItems.length===0){return false;}
//see if the current item is in the filtered list
if (($filter('filter')(filteredItems,item)).length===1){
return true;
} else {
return false;
}
}
我在 http://plnkr.co/edit/JCQdcP?p=preview 创建了一个 plunker
关于javascript - Angular 用户界面 : Correctly updating the models between two lists with a filter applied,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19072689/
命令 npm update 有什么区别和包裹npm-check-updates ?使用后者是否完全安全? 执行后好像是npm update并非所有软件包都已更新,因此似乎不完整。许多其他 popula
我有使用 ExpressJS 和 ORM Sequelize 的 API。我正在尝试使用 Sequelize 中的 update() 方法进行更新。默认情况下,it 方法将返回更新的行数。但我希望结果
关于如何更新 rubygems 有点困惑。过程不断变化(或者至少我从互联网上得到了相互矛盾的信息)。 $ gem outdated rubygems-update (1.8.10 < 1.8.11
我正在使用 webpack-dev-server处于开发模式( watch )。每次服务器重新加载时,一些 json 和 js 文件都会挤满我的构建目录,如下所示:'hash'.hot-update.
Mamp Pro 的当前版本是 5.04 (15996)。可用更新窗口显示“Mamp 5.0.0 > 5.1。更新失败,并显示一条消息:错误:无法验证更新。请确保您使用的是安全网络,然后重试。” 更新
我想在浏览量增加时更新时间戳“lastpageview_at”。我想我已经接近了,但我总是遇到语法错误,有人知道为什么或有其他解决方案吗? 我的触发器: CREATE TRIGGER Update_l
我正在执行 SELECT ... FOR UPDATE 以锁定一条记录,然后进行一些计算,然后进行实际的 UPDATE。我正在处理 InnoDB 数据库。 但是计算可能会以我不想执行 UPDATE 的
我需要在表更新时进行一些更新和插入以强制执行正确的数据。将 UPDATE 语句放入触发器中会导致某种“循环”吗? 谢谢! 最佳答案 更新触发器中的目标表将使触发器再次触发。 您可以使用 TRIGGER
这是我的布局 当我点击链接更新时,该链接应该打开和关闭renderComment bool
我有一个包含两件事的 Angular 范围: 一个包含 10k 行的巨型表格,需要一秒钟才能渲染 一些小的额外信息位于固定的覆盖标题栏中 根据您向下滚动页面/表格的距离,我必须更新标题中的小信息位之一
标题几乎已经说明了一切。 IF NEW.variance <> 0 THEN (kill update) END IF 这可能吗? 最佳答案 查看手册 (http://dev.mysql.com/do
我有几个表,我想强制执行版本控制,并且有一个生效日期和生效日期。每当应用程序或用户向该表写入更新时,我希望它重定向到两个全新的命令:更新目标记录,以便 EFFECTIVE_TO 日期填充当前日期和时间
我正在使用 Shopware,一件奇怪的事情让我抓狂 :( 所以我将首先解释问题是什么。 除了普通商品外,还有多种款式的商品,例如不同尺码的衬衫。这是 XS、S、M、L 和/或不同颜色的同一商品……但
寻求帮助制作 mysql 触发器。我当前的代码无法按预期工作。我想做的是,如果表A中的字段A被修改,则将字段A复制到表A中的字段B。 当前代码如下所示: BEGIN IF new.set_id=301
以下查询(来自此处Postgres SQL SELECT and UPDATE behaving differently) update fromemailaddress set call =
我想使用 D3 使用以下数据创建一个列表: var dataSet = [ { label: 'a', value: 10}, { label: 'b', value: 20},
哪个更好,先进行选择,然后进行更新。或者更确切地说,像这样合而为一: UPDATE items set status = 'NEW' where itemid in (1,2,3,
对于 eloquent model events,updating 和 updated 之间有什么区别? ? 我的猜测是 updating 在模型更新之前触发,而 updated 在模型更新之后触发。
我有一个对象数组(我们称之为arr)。在我的组件输入之一的 (change) 方法中,我修改了这些对象的属性之一,但在 View (*ngFor) 中没有任何变化。我读到 Angular2 变化检测不
我正在尝试使用 d3.js 构建水平日历时间线。主要目标是突出显示用户的假期和假期。 http://jsbin.com/ceperavu/2/edit?css,js,output 我首先从“开始”日期
我是一名优秀的程序员,十分优秀!