我遇到一个问题,当我刷新数据时(基本上是重新调用创建数组的方法),我的Angular 数组项会重复,因为它添加了与预先存在的数组相同的项目。
当我在帐户之间切换时,会发生这种情况,方法是选择 <select>
中的下拉帐户 ID 之一。 .
这是我更改帐户/个人资料的 HTML 代码:
<div ng-show="showSelectTwitterAccounts">
<div>
<div id="DropDownBox">
<label for="ViewTwitterProfile">Select Twitter Profile: </label>
<select ng-change="changeTwitterProfile()" ng-model="selectedTwitterProfileID" id="ViewTwitterProfile" ng-options="channelID for channelID in twitterChannels"></select>
</div>
</div>
</div>
这是我的 Controller 中创建配置文件 ID 数组的方法:
function getChannelProfiles() {
$scope.showSelectTwitterAccounts = true;
GetUserAccessService.returnBrandProfileID().then(function (brandProfileID) {
SocialMediaUserService.channelProfiles().then(function (channelProfiles) {
channelProfiles.forEach(function (channel) {
if (channel.brand_profile_id === brandProfileID && channel.channel_type === 'twitter') {
$scope.twitterChannels.push(channel.id);
}
});
console.log($scope.twitterChannels);
});
});
}
这是我切换帐户时调用的方法:
$scope.changeTwitterProfile = function () {
$scope.dataModel = DataModelService.showDataLoadingAnimation();
$scope.twitterPageMetrics = {};
$scope.dataContent = false;
$scope.showSelectTwitterAccounts = true;
var twitterID = $scope.selectedTwitterProfileID;
GetFusionDataService.getItems(getRequestURL(twitterID))
.success(function (data) {
handleDataRetrievalSuccess(data);
getChannelProfiles();
})
.error(function (error, status) {
handleDataRetrievalError(error, status);
});
};
我明白为什么会发生重复。数组没有被清除,我不断地将相同的ID插入数组。
我尝试了几个选项来阻止这种情况,例如添加
$scope.twitterChannels = [];
在我创建 View 的方法中。这会按预期将数组设置为空数组,并且会重新创建该数组,且不会出现重复项。
但是,当我调用我的 $scope.changeTwitterProfile
时方法,一切都按计划进行,直到再次创建数组为止。数组被清空,数据调用检索数据来过滤数组,但是在数据返回之前,系统进入了我的$scope.changeTwitterProfile
方法,此时数组仍然是空的,没有找到配置文件。之后,数组将按其应有的方式创建。
对冗长的解释表示歉意 - 我只是想弄清楚我已经尝试过什么以及发生了什么。
非常感谢您的帮助。
最佳答案
据我了解, 您正在清除代表选择框选项的 id 数组。
以下是您采取的步骤
- 清除数组进行 $http 调用。
- 有两个 $http 服务调用
- 用新元素填充数组
您暂时看不到下拉列表的原因是因为 Angular 在 $http promise 完成后运行摘要周期。在您的情况下,它会在您的第一个 promise GetUserAccessService.returnBrandProfileID() 履行并且您的第二个 promise SocialMediaUserService.channelProfiles() 尚未履行时运行。
有两种方法可以解决这个问题。
- 不要在 $scope.twitterChannels.push(channel.id) 中推送相同的元素
- 第二个 promise 时清除 $scope.twitterChannels SocialMediaUserService.channelProfiles() 已实现[在其解析函数中]。
关于javascript - 在重新创建数组之前清除数组,以在数据刷新或重新加载时停止 Angular HTML SELECT 中的重复下拉选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41444714/