gpt4 book ai didi

javascript - 如何阻止 Angular 清除文本选择?

转载 作者:行者123 更新时间:2023-12-03 09:57:22 26 4
gpt4 key购买 nike

我正在尝试使用 Angular 每隔几秒渲染和刷新一个复杂对象的列表。我发现的一个问题是,当刷新发生时,即使特定的 HTML 子组件没有更改,HTML 也会更新,并且如果您选择了某些文本(例如,您试图复制它),则选择会变为离开。

我知道更改包含选择的 html 存在一个普遍问题,但我想知道 Angular 是否有一些解决方案来解决我不知道的问题。基本上我正在寻找的只是实际更改的 HTML。如果我在 jQuery 中手动编写 View 代码,我就可以做到这一点,但手动执行的所有其他部分都很糟糕

JS:

angular.module('items', [])
.factory('itemList', ['$http', function($http) {
var items = [];
var refresh = function() {
// imagine that this makes an HTTP call to get the new list
// of items
items.length = 0;
for (var i = 0; i < 10; i++) {
items.push("item " + Math.random(1, 10))
}
}
refresh();
return {
items: items,
refresh: refresh
};
}]);


var app = angular.module('app', [
'items'
]);

app.controller('ItemListController',
['$scope', 'itemList', '$interval',
function($scope, itemList, $interval) {
this.items = itemList.items;
$interval(itemList.refresh, 2000)
}
]);

HTML:

<body ng-app="app">
<div ng-controller="ItemListController as controller">
<h3>Items</h3>
<div ng-model="active">
<div ng-repeat="item in controller.items">
<div class="header">Header</div>
<div>{{item}}</div>
<hr/>
</div>
</div>
</div>

</body>

最佳答案

当你在每次刷新时批量替换 itemList 时,Angular 没有选择,只能重新创建 ng-repeat 中的所有元素,如果你不介意丢失选择并且刷新不介意,那么这很好。太大而且昂贵。为了防止这种情况,您可以尝试在该工厂中编写一个合并,将先前的内容与新的内容进行比较,并添加/删除项目而不替换整个引用。然后,只有当您选择的项目不再存在时,您才会失去选择。

此外,如果列表很长并且刷新之间的差异很小,那么这可能会更有效。

关于javascript - 如何阻止 Angular 清除文本选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30687206/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com