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

Can I transfer a variable from JavaScript to Python in a seamless way?

Insert newly added rows' values into the database dynamically

Unveil the power of the "Enter" key with these jQuery hacks

What's the best way to create flying text effects - using CSS or JavaScript

What is the best approach to ensure the navbar is responsive based on the viewport size?

Where to Locate a String Excluding <a> Tags?

What methods can I use to prevent repeated login requests to SalesForce databases when using Express.js routers?

What are the steps to implement email validation, Saudi mobile number validation, and national ID validation in cshtml?

using the image source in the onclick function

Is it possible to adjust the CSS code linked to the HTML tag based on the specific webpage being viewed?

Load Facebook video onto webpage using ajax technology

What is the process for incorporating an animated gif into a scene?

The Primeng Angular2 checkbox malfunctioning issue

Converting Emoji to PNG or JPG using Node.js - What's the Procedure?

Show information in a text field from JSON in SAPUI5

Require.js and R.js optimizer overlooks shimming configuration

Facing delays in receiving responses for inner loop in node.js

having difficulty sending the username and password from the HTML page to the controller in AngularJS

fnRedraw and fnReloadAjax do not have the capability to refresh the datatable

Learn the process of filtering an array using another array