Creating a selectAll checkbox that triggers the ng-click function on each individual checkbox

Question

Creating a selectAll checkbox that triggers the ng-click function on each individual checkbox

I've encountered an issue with my code where clicking a checkbox triggers the ng-click function. Here is the JavaScript snippet:

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

The code was used within a table that had ng-repeat and ng-click functionalities. I utilized .stopPropagation() to prevent the table's ng-click from being triggered.

Now, I am trying to implement a select all checkbox feature with this code:

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

However, upon running the code, an error occurs stating

TypeError: Cannot read property 'stopPropagation' of undefined

.

I cannot simply remove the stopPropagation as it serves a crucial purpose. Can anyone provide suggestions on how I can successfully select all checkboxes and execute the ng-click function for each? Your help is greatly appreciated. Thank you!

javascript angularjs checkbox underscore.js lodash

Answer 1

Answer №1

Just a few thoughts worth considering.

Instead of adding to scope with selectedAll, it might be more efficient to keep it as a private variable inside the controller.

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

Your checkboxes can directly link to the title.isSelected state for easier handling and toggling.

Take a look at: https://docs.angularjs.org/api/ng/directive/ngChecked

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

'title' in this context refers to your ng-repeat data object.

Consider implementing a directive within your ng-repeat loop for better organization.

Here's an example directive:

angular.module('appName')
    .directive('portfolioItem', function() {
        return{
            restrict:'E',  
            replace:true,
            templateUrl:'portfolioItem.view.html',
            scope:{
                data:'='  
            }
            
        };
    });

Don't forget to create a script ng-template for "portfolioItem.view.html"

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

You may also want to rethink your select item function by pushing data into a factory to streamline your controllers and reduce watchers.

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

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

        $log.debug('DataManager Init');

        mngr = {
            CurrentSearchTerm: null,
            Items: [],
            Abort: abort,
            GetData: getData,  
            GetMoreResults: getMoreResults
        };

        function getData(){
            dataService.getData().then(function(response){
             mngr.Items.push(parsedDataItem);
            };
        }


        return mngr;
   }

Your controller can then iterate through DataManager.Items or use filters like Underscore or Angular for enhanced data management.

Answer 2

Just a few thoughts worth considering.

Instead of adding to scope with selectedAll, it might be more efficient to keep it as a private variable inside the controller.

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

Your checkboxes can directly link to the title.isSelected state for easier handling and toggling.

Take a look at: https://docs.angularjs.org/api/ng/directive/ngChecked

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

'title' in this context refers to your ng-repeat data object.

Consider implementing a directive within your ng-repeat loop for better organization.

Here's an example directive:

angular.module('appName')
    .directive('portfolioItem', function() {
        return{
            restrict:'E',  
            replace:true,
            templateUrl:'portfolioItem.view.html',
            scope:{
                data:'='  
            }
            
        };
    });

Don't forget to create a script ng-template for "portfolioItem.view.html"

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

You may also want to rethink your select item function by pushing data into a factory to streamline your controllers and reduce watchers.

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

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

        $log.debug('DataManager Init');

        mngr = {
            CurrentSearchTerm: null,
            Items: [],
            Abort: abort,
            GetData: getData,  
            GetMoreResults: getMoreResults
        };

        function getData(){
            dataService.getData().then(function(response){
             mngr.Items.push(parsedDataItem);
            };
        }


        return mngr;
   }

Your controller can then iterate through DataManager.Items or use filters like Underscore or Angular for enhanced data management.

Answer 3

Answer №2

This solution may not be the most visually appealing, but it serves two purposes: only handling evt if it is defined, and passing the element into selectTitle from selectAll. It minimizes changes to your existing code. In general, you may even be able to do without selectTitle by using ng-model on your checkbox.

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

This solution may not be the most visually appealing, but it serves two purposes: only handling evt if it is defined, and passing the element into selectTitle from selectAll. It minimizes changes to your existing code. In general, you may even be able to do without selectTitle by using ng-model on your checkbox.

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

Creating a selectAll checkbox that triggers the ng-click function on each individual checkbox

Answer №1

Answer №2

Similar questions

Transformation of firebug console information into a function()

Unraveling the Perfect Jest Stack Trace

Postal Code Auto-Suggest by Google

Develop a custom time input mask in AngularJS controller

Modification of a CSS element

AngularJS does not hide the Onsen UI modal

Total the values of several items within the array

What are the steps to incorporate a Microsoft Project Dashboard into a web application?

Is it feasible to utilize multiple ng-app directives in AngularJS? If so, under what circumstances would we do so and what is the process for registering them with an Angular module?

The jQuery AJAX function appears to be unresponsive and failing to execute

Implementing conditional reduction in JavaScript arrays

Utilizing Ajax to serialize or transfer JSON objects

Guide on incorporating Bootstrap JS into HTML5 reusable web elements

Is it possible to load JavaScript code once the entire page has finished loading?

Maintain the expanded sub-menu when the mouse leaves the area, but a sub-option has been

Get rid of empty spaces in gridstack js

Creating multiple asynchronous calls within a loop in JavaScript

Feeling grateful: Enable scroll functionality for a log widget

How can I stop jQuery mobile from updating the document title?

Editable content <div>: Cursor position begins prior to the placeholder