Javascript 禁用NG时推送前Angularjs检查数组
每件衣服都分配了一个ID,可以在Javascript 禁用NG时推送前Angularjs检查数组,javascript,jquery,angularjs,ng-storage,Javascript,Jquery,Angularjs,Ng Storage,每件衣服都分配了一个ID,可以在$StateParams功能和页面URL中找到衣服ID-例如#/dresses/21 当用户单击Heart(喜欢)或Breaked Heart(不喜欢)按钮时,衣服ID将放置在localstorage Heart/Breaked Heart数组中-请参见下文 此外,当点击任何一个按钮时,该按钮会自动禁用,从而防止按下多个衣服ID!单击opersit按钮可恢复此操作 问题 我不知道如何在刷新页面后防止提交相同的裙子ID-我尝试在推送裙子ID之前搜索数组,但没有成功。
$StateParams
功能和页面URL中找到衣服ID-例如#/dresses/21
当用户单击Heart(喜欢)或Breaked Heart(不喜欢)按钮时,衣服ID将放置在localstorage Heart/Breaked Heart数组中-请参见下文
此外,当点击任何一个按钮时,该按钮会自动禁用,从而防止按下多个衣服ID!单击opersit按钮可恢复此操作
问题我不知道如何在刷新页面后防止提交相同的裙子ID-我尝试在推送裙子ID之前搜索数组,但没有成功。此外,我还可以通过防止双击来防止提交双礼服ID,但是如果我刷新页面,按钮可以将礼服ID推送到阵列中,尽管它已经有了礼服ID 任何指导都会大有帮助
多谢各位 设计:
HTML:
<ul class="railcontrols">
<li>
<md-button aria-label="" class="md-fab md-mini" ng-click="heart()" ng-dblclick="return false;" ng-disabled="heartflag">
<md-icon md-svg-src="svg/heart.svg"></md-icon>
</md-button>
</li>
<li>
<md-button aria-label="" class="md-fab md-mini" ng-click="brokenheart()" ng-dblclick="return false;" ng-disabled="brokenheartflag">
<md-icon md-svg-src="svg/brokenheart.svg"></md-icon>
</md-button>
</li>
</ul>
fittingApp.controller('railsCtrl', ['$scope', '$localStorage', '$stateParams','$filter', function($scope, $localStorage, $stateParams, $filter) {
$scope.$storage = $localStorage;
var dressID = $stateParams.id;
if ($scope.$storage.userLoveList === undefined) {
var getUserID = $scope.$storage.profileData.userID;
$scope.$storage.userLoveList = ({
'userID': getUserID,
'heart': [],
'brokenheart': []
});
}
$scope.heartflag = false;
$scope.heart = function() {
$scope.heartflag = true;
$scope.brokenheartflag = false;
// Push Heart
$scope.$storage.userLoveList.heart.push({'dressID': dressID});
// Remove BrokenHeart
$scope.$storage.userLoveList.brokenheart = $filter('filter')($scope.$storage.userLoveList.brokenheart, {dressID: '!'+dressID});
};
$scope.brokenheartflag = false;
$scope.brokenheart = function() {
$scope.brokenheartflag = true;
$scope.heartflag = false;
// Push Broken Heart
$scope.$storage.userLoveList.brokenheart.push({'dressID': dressID});
// Remove Heart
$scope.$storage.userLoveList.heart = $filter('filter')($scope.$storage.userLoveList.heart, {dressID: '!'+dressID});
};
}]);
输出{{$storage | json}
{
"userLoveList": {
"userID": "1",
"heart": [
{
"dressID": "21",
"dressID": "21", // Prevent Duplicates
"dressID": "19"
}
],
"brokenheart": [
{
"dressID": "10"
}
]
}
}
更改代码,如下所示:
fittingApp.controller('railsCtrl', ['$scope', '$localStorage', '$stateParams', function($scope, $localStorage, $stateParams) {
$scope.$storage = $localStorage;
var dressID = $stateParams.id;
if ($scope.$storage.userLoveList === undefined) {
var getUserID = $scope.$storage.profileData.userID;
$scope.$storage.userLoveList = ({
'userID': getUserID,
'heart': [],
'brokenheart': []
});
}
function remove(list, value) {
var index = list.indexOf(value);
if (index > -1) {
list.splice(index, 1);
}
}
$scope.heartflag = $scope.$storage.userLoveList.heart.indexOf(dressID) > -1;
$scope.brokenheartflag = $scope.$storage.userLoveList.brokenheart.indexOf(dressID) > -1;
$scope.heart = function() {
$scope.heartflag = true;
$scope.brokenheartflag = false;
// Push Heart
$scope.$storage.userLoveList.heart.push(dressID);
// Remove BrokenHeart
remove($scope.$storage.userLoveList.brokenheart, dressID);
};
$scope.brokenheart = function() {
$scope.heartflag = false;
$scope.brokenheartflag = true;
// Push Broken Heart
$scope.$storage.userLoveList.brokenheart.push(dressID);
// Remove Heart
remove($scope.$storage.userLoveList.heart, dressID);
};
}]);
发生的情况如下:
我们首先要检查
dressID
是否已经存在于heart
或Breaknheart
列表中,以便禁用特定按钮。现在,由于我们已经禁用了特定的按钮,用户将无法单击is两次。如果heart
数组只是id值(而不是对象),似乎会更简单。。。然后检查该id值的indexOf()
。否则,必须为每个dressId
@charlietfl迭代数组如果我调整数组,那么在按下之前是否能够检查数组?此外,这是否有助于记住按钮的状态,例如是否单击了按钮?