-1
这是我plnkr我迄今取得的进展：但是实现了以下功能http://plnkr.co/edit/iEHMUMlASZaqdMQUeF7J?p=preview禁用物品
我有问题。
当点击列表中的项目时，我需要禁用列表中的其余项目。即不应该发生另一个请求，并且这些剩余项目的颜色应该改变以指示禁用状态。
请求发生后，整个列表应该回到原始状态。
编辑：我取得了一些进展。虽然有点凌乱，但它让我更接近了一点。我的问题是以下行：
$(this).parent().addClass('item-selected').children().unbind('click').removeClass('pending');
这可以防止单击事件一次运行多次。但是，一旦它第一次运行，就会停止单击事件。我希望能够在无限次的完成后重新运行该流程。
指令：
app.directive('listItem', function (ListService, $timeout, $location) {
return {
restrict: 'ACE',
controller : 'ItemController',
template: '<p>{{item}} {{foo}}</p>',
link: function (scope, element, attrs) {
$(element).bind('click', function (e) {
$(this).parent().addClass('item-selected').children().unbind('click').removeClass('pending');
$(this).addClass('pending');
var elem = $(this);
$timeout(function() {
ListService
.selectItem(scope.item)
.then(function() {
console.log('success');
elem.removeClass('pending').addClass('success');
//$location.path('foo.html')
scope.foo = 'not bar';
}, function() {
console.log('error');
elem.removeClass('pending').addClass('error');
elem.parent().removeClass('item-selected');
});
;
}, 2000);
});
}
};
});
整个应用程序代码，包括指令：
var app = angular.module('listtestApp', []);
app.service('ListService', function ($http) {
var data = [
'alpha',
'bravo',
'charlie',
'delta',
'foxtrot'
];
return {
getData : function() {
return data;
},
selectItem : function() {
return $http({ method: 'GET', url : '/data/list.json'});
}
}
});
app.controller('ListController', function ($scope, ListService) {
$scope.list = ListService.getData();
$scope.foo = 'Bar';
});
app.controller('ItemController', function ($scope, ListService) {
});
app.directive('listItem', function (ListService, $timeout, $location) {
return {
restrict: 'ACE',
controller : 'ItemController',
template: '<p>{{item}} {{foo}}</p>',
link: function (scope, element, attrs) {
$(element).bind('click', function (e) {
$(this).parent().addClass('item-selected').children().unbind('click').removeClass('pending');
$(this).addClass('pending');
var elem = $(this);
$timeout(function() {
ListService
.selectItem(scope.item)
.then(function() {
console.log('success');
elem.removeClass('pending').addClass('success');
//$location.path('foo.html')
scope.foo = 'not bar';
}, function() {
console.log('error');
elem.removeClass('pending').addClass('error');
});
;
}, 2000);
});
}
};
});
HTML下面的标记：
<body ng-app="listtestApp">
<div ng-controller="ListController">
<div ng-repeat="item in list" list-item>
</div>
</div>
</body>
请张贴你的代码的相关部分在这里，所以他们可以看到，而不必去另一个网站。 –
嗨，帕特里克，我将上面使用的角码粘贴到我的帖子中。谢谢你的帮助。 – JimmyBob
发布你的ng-repeat html代码 - 你可以使用过滤器来实现你想要做的事情 – ewizard