Accessing the checkbox checked from the controller in angularjs

Question

There are a couple of checkboxes and a button. When i press the button need to know which all checkboxes are selected in the controller.

I have a controller Mcontroller where i have $scope.selected_machines = {}

html file have the checkboxes created dynamically

<tr ng-repeat="(m, res) in results.byMachine">
   <td> {{ m }}
     <input type="checkbox" id ="{{ m }}" name="bypass_check"
            ng-disabled="disableBypassWaitForDrainedCheck(m, results.bypassed_machines)"
            ng-model="selected_machines[m]">
  </td>

the html file is called using a directive

.directive('visualizer', [$window, function ($window) {
    return {
      restrict: 'E',
      scope: {
        selected: '<selected',
      },
      templateUrl: 'static/html/ng/visualizer.html',
      link: function (scope, element, attrs) {
        scope.data = {}
        scope.pollers = {}
        scope.rendered = {}
        scope.table = {}
.........

The buttons click function is bypassWaitForDrained() function called from an angular service file and is defined in the controller Mcontroller. I need to access the checked checkboxes from this function. Tried following and the value in selected_machines are never updated. Basically the ngModel selected_machines data is not getting updated in the controller. May i know what could be the reason ?

$scope.bypassWaitForDrained = function(pipelineId) {

    Loop through selected_machines
}

try with adding extra dot in model scope, so try to replace selected_machines to parhaps something like checkboxes.selected. this is because selected_machines will attach to child scope build by ng-repeat — Praveen Soni
– Praveen Soni, Commented Mar 3, 2020 at 17:52
@PraveenSoni The ng-model binds to a property of an object, selected_machines[m]. It uses bracket notation instead of dot notation. That is sufficient to avoid the data hiding problem. — georgeawg
– georgeawg, Commented Mar 3, 2020 at 18:13

georgeawg · Accepted Answer · 2020-03-03 18:31:57Z

The directive is using isolated scope, that means its scope does not inherit anything from parent scope. Parent scope properties need to be bound to the isolate scope:

.directive('visualizer', [$window, function ($window) {
    return {
      restrict: 'E',
      scope: {
        selected: '<selected',
        //IMPORTANT
        selected_machines: '<selectedMachines'
      },
      templateUrl: 'static/html/ng/visualizer.html',
      link: function (scope, element, attrs) {
        scope.data = {}
        scope.pollers = {}
        scope.rendered = {}
        scope.table = {}

Usage:

<div ng-controller="Mcontroller">
    <visualizer selected-machines="selected_machines" selected="...">
    </visualizer>
</div>

This will bind the $scope.selected_machines object reference in the Mcontroller to the isolated scope of the directive.

For more information, see

AngularJS Developer Guide - Isolating the scope of a directive

Collectives™ on Stack Overflow

Accessing the checkbox checked from the controller in angularjs

1 Answer 1

Usage:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Usage:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related