如何制作一个 selectAll 复选框并触发 ng-click 每个复选框的每个功能？

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);
     };

它在 table 中，带有 ng-repeat 和 ng-click 代码，所以我使用 .stopPropagation() 来防止激活 table 的 ng-click 功能。

现在我需要制作一个 select 全部复选框。这是我的代码。

$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，因为它阻止了我之前所说的。你能给我一些建议，告诉我如何 select 所有复选框并调用每个复选框的 ng-click 函数吗？提前致谢。

Answer 1

这不是最漂亮的解决方案，但是它做了两件事，只处理 evt 如果已定义，并将元素从 selectAll 传递到 selectTitle。这是对代码更改最少的解决方案。一般来说，你应该能够在没有 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);
            }
     })};

Answer 2

一些想法。

为什么要使用 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" .../>

其中 'title' 确实是您的 ng-repeat 数据对象。

此外，我建议在您的 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. 
        };
    });

然后为 "portfolioItem.view.html"

创建脚本 ng-template

<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

如果我能帮你多一点就好了。我认为您的 select 项目功能应该更改。将您的数据推送到工厂，然后它可以成为所有控制器的 backbone。这就是我们所做的，减少您的观察者并提高您处理数据的能力。

 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（或过滤它将下划线或 Angular）。有道理吗？

如何制作一个 selectAll 复选框并触发 ng-click 每个复选框的每个功能？

How to make a selectAll checkbox and triggering every function of ng-click on every checkbox?

javascript

checkbox

underscore.js

angularjs

lodash