Choosing multiple items using ng-checked and ng-model in AngularJS

Question

Choosing multiple items using ng-checked and ng-model in AngularJS

I am working with an Ionic application and encountering a minor issue, much like AngularJS.

<ion-list class="list-inset subcategory" ng-repeat="item in shops">
      <ion-checkbox class="item item-divider item-checkbox-right" ng-model="selectAll">
        {{item}}
      </ion-checkbox>
      <ion-item ng-repeat="value in data | filter:{shopName: item}" class="item-thumbnail-left" ng-click="openProduct(value)">
...
        <div class="row">
          <ion-checkbox stop-event='click' ng-model="value.selected" ng-checked="selectAll">{{value.name}}</ion-checkbox>
        </div>
...
    </ion-list>

Clicking on the item with ng-model="selectAll" selects all items. However, I am facing an issue with the property value.selected. It is set to false for each individual value. When I click on an item with ng-model="value.selected", it changes. But when I try to select all by clicking on the item with ng-model="selectAll", this property remains unchanged. Can someone offer assistance?

Note: My code includes nested ng-repeats, one for shops and another for products. There is also a shopName filter in place. My goal is to select all items by shop, and although the functionality works as intended, the property value.selected does not change. Value represents a product, while item represents a shop.

javascript angularjs

Answer 1

Answer №1

the status of the selectAll function can be deduced from the state of your other checkboxes, so there is no need to save it as a separate field.

You can utilize a getterSetter on the selectAll model to determine if it should be checked. For example:

<input type="checkbox" ng-model="selectAll" ng-model-options="{getterSetter: true}"/>

Javascript:

var getAllSelected = function () {
    var selectedItems = $scope.Items.filter(function (item) {
        return item.Selected;
    });

    return selectedItems.length === $scope.Items.length;
}

var setAllSelected = function (value) {
    angular.forEach($scope.Items, function (item) {
        item.Selected = value;
    });
}

$scope.selectAll = function (value) {
    if (value !== undefined) {
        return setAllSelected(value);
    } else {
        return getAllSelected();
    }
}

http://jsfiddle.net/2jm6x4co/

Answer 2

the status of the selectAll function can be deduced from the state of your other checkboxes, so there is no need to save it as a separate field.

You can utilize a getterSetter on the selectAll model to determine if it should be checked. For example:

<input type="checkbox" ng-model="selectAll" ng-model-options="{getterSetter: true}"/>

Javascript:

var getAllSelected = function () {
    var selectedItems = $scope.Items.filter(function (item) {
        return item.Selected;
    });

    return selectedItems.length === $scope.Items.length;
}

var setAllSelected = function (value) {
    angular.forEach($scope.Items, function (item) {
        item.Selected = value;
    });
}

$scope.selectAll = function (value) {
    if (value !== undefined) {
        return setAllSelected(value);
    } else {
        return getAllSelected();
    }
}

http://jsfiddle.net/2jm6x4co/

Answer 3

Answer №2

If you want to implement a functionality where clicking on an item will trigger a function and set selected=true for all other items, you can utilize ngClick on the main item with ng-model="selectAll". Inside the ng-click function, you can then iterate through all the other items and set their ng-model="value.selected" as true.

Answer 4

If you want to implement a functionality where clicking on an item will trigger a function and set selected=true for all other items, you can utilize ngClick on the main item with ng-model="selectAll". Inside the ng-click function, you can then iterate through all the other items and set their ng-model="value.selected" as true.

Choosing multiple items using ng-checked and ng-model in AngularJS

Answer №1

Answer №2

Similar questions

I am facing an issue with my Angular 11 CLI application while trying to set it up with Jest. The specific error message I am encountering is: "TypeError: Cannot read property

Display an icon from the glyphicon library in an Angular application based on a

AngularJs can manipulate the visibility of elements by showing or hiding them based

Having trouble obtaining a GuildMember's displayName in Discord.js leads to a TypeError

Enhance User Experience with the Tooltip Feature and Customized

The catch all route in Next.js seems to be malfunctioning when paired with the getStaticPaths function

Generate a compressed folder containing a collection of PNG images

Problem encountered when transferring JSON data to PHP for file writing

Node.js encountering req.body as undefined when using form-data as the content-type

Setting Up AdminLTE Using Bower

Res.redirect is failing to redirect and displaying error message 'Connection Unavailable'

Strategies for managing events within functional React components without relying on mutative operations

The blurriness of AngularJS directive canvas is causing visibility issues

Date range within a conditional statement

Switch Selector for React Native

The transition from ExtJS 4 to ExtJS 5: A comprehensive guide

Heroku is experiencing issues with loading Firebase credentials

What is the best way to implement rate limiting for Next.js server actions?

Discovering the upcoming work schedule and day based on a provided set of working hours

Utilizing ion-slide-box within an ion-content container that allows for scrolling