如何制作一个selectAll复选框并触发每个复选框的每个ng键单击功能？

Question

我有一些代码，当你点击一个复选框时，它将执行ng-click。这是它的JS。

$scope.selectTitle = function(evt, selected){ 
     evt.stopPropagation(); 
     var filtered = _.findWhere($scope.selectedTitles, {id: selected.id}); 
     var index = _.indexOf($scope.selectedTitles, selected); 
     if(selected === filtered){ 
      $scope.selectedTitles.splice(index, 1) 
     } 
     else{ 
      $scope.selectedTitles.push(selected); 
     } 
     console.log('titles', $scope.selectedTitles, 'filtered', filtered, 'index', index); 
    }; 

这是在NG-重复一个表，也NG-点击代码，所以我用.stopPropagation()防止激活NG单击表格的功能。

现在我需要做一个全选复选框。这是我的代码。

$scope.selectAll = function (filteredTitles) { 
     if ($scope.selectedAll) { 
      $scope.selectedAll = false; 
     } else { 
      $scope.selectedAll = true; 
     } 
     _.forEach(filteredTitles, function(cpPortfolioItem) { 
      cpPortfolioItem.Selected = $scope.selectedAll; 
      if(cpPortfolioItem.Selected){ 
       $scope.selectTitle(); 
      } 
    }); 

当我运行它。有一个错误说TypeError: Cannot read property 'stopPropagation' of undefined。

我无法删除stopPropagation，因为它阻止了我之前所说的。你能给我一些关于如何选择所有复选框并调用每个复选框的ng-click功能的建议吗？提前致谢。

Answer 1

的一点想法。

为什么使用selectedAll添加范围？应该只是控制器内部的一个私有变量。

var selectedAll = false; 
$scope.selectAll = function(){ 
     selectedAll = !selectedAll; // quick toggle. 
     _.forEach(filteredTitles, function(title){ 
        title.isSelected = selectedAll; 
     } 
} 

然后你的复选框应该直接钩入到title.isSelected状态。单独或使用selectAll来更改它会相当容易。

参见：https://docs.angularjs.org/api/ng/directive/ngChecked

<input ng-checked="title.isSelected" .../> 

如果 '标题' 真的是你的NG-重复数据对象。

另外我会建议在你的ng-repeat中使用一个指令。

样品指令：

angular.module('appName') 
    .directive('portfolioItem', function() { 
     return{ 
      restrict:'E', // Element only style 
      replace:true, 
      templateUrl:'portfolioItem.view.html', 
      scope:{ 
       data:'=' // binds the attribute into your scope 
      } 
      // You can add a controller here as well. 
     }; 
    }); 

然后创建一个脚本NG-模板 “portfolioItem.view.html”

<script ng-template="portfolioItem.view.html"> 
    <section class="item"> 
    {{data}} 
    <input ng-checked="data.isSelected" ... /> 
    </section> 
</script> 

https://docs.angularjs.org/api/ng/directive/script

如果我可以帮你了WEEE位更多。我认为你的选择项目功能应该改变。将数据推送到工厂，然后工厂可以作为您所有控制器的骨干。这就是我们所做的，减少您的观察者并提高您处理数据的能力。

angular.module('appName') 
     .factory('DataManager', DataManager); 

    function DataManager($log, $timeout, ItemModel) { 
     var mngr, config = getConfig(); // any default values 

     $log.debug('DataManager Init'); 

     mngr = { 
      CurrentSearchTerm: null, 
      Items: [], 
      Abort: abort, 
      GetData: getData, // Function call to get data. 
      GetMoreResults: getMoreResults 
     }; 

     function getData(){ 
      dataService.getData().then(function(response){ 
      // ...parse data, etc...loop and : 
      mngr.Items.push(parsedDataItem); 
      }; 
     } 


     return mngr; 
    } 

然后您的控制器将重复关闭DataManager.Items（或将其过滤为Underscore或Angular）。合理？

Answer 2

这是不是最漂亮的解决方案，但是，这样做两件事情，只能用evt如果定义了处理，并将该元素放入selectTitle从selectAll。这是改变你的代码最少的解决方案。一般来说，你应该能够在没有selectTitle的情况下在你的复选框上使用ng-model。

$scope.selectTitle = function(evt, selected){ 
    if(evt) evt.stopPropagation(); 
    var filtered = _.findWhere($scope.selectedTitles, {id: selected.id}); 
    var index = _.indexOf($scope.selectedTitles, selected); 
    if(selected === filtered){ 
     $scope.selectedTitles.splice(index, 1) 
    } 
    else{ 
     $scope.selectedTitles.push(selected); 
    } 
    console.log('titles', $scope.selectedTitles, 'filtered', filtered, 'index', index); 
}; 

-

$scope.selectAll = function (filteredTitles) { 
     if ($scope.selectedAll) { 
      $scope.selectedAll = false; 

     } else { 
      $scope.selectedAll = true; 

     } 
     _.forEach(filteredTitles, function(cpPortfolioItem) { 
      cpPortfolioItem.Selected = $scope.selectedAll; 
      if(cpPortfolioItem.Selected){ 
       $scope.selectTitle(null, cpPortfolioItem); 
      } 
    })};