Question

到目前为止，我的plnkr是我的进展：http://plnkr.co/edit/iEHMUMlASZaqdMQUeF7J?p=preview

但是我在实现以下功能时遇到了问题。

单击列表中的项目时，我需要禁用列表中的其余项目。即，不应该发生另一个请求，这些剩余的项目＆＃39;颜色应该更改以指示禁用状态。

请求发生后，整个列表应返回原始状态。

编辑：我取得了一些进展。虽然有点乱，但它让我更近了一点。我的问题是以下几行：

$(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>

Answer 1

您可以使用多种解决方案：

编辑：如果您想在发布请求后重新启用选择，则可以使用类似this（版本＃1的变体）的内容

单击另一个项目时禁用ng-repeat列表中的项目

1 个答案: