0

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
}
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Deepak
  • 1
  • 1
  • https://stackoverflow.com/questions/18128323/if-you-are-not-using-a-dot-in-your-angularjs-models-you-are-doing-it-wrong – Praveen Soni Mar 03 '20 at 17:49
  • 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 Mar 03 '20 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 Mar 03 '20 at 18:13

1 Answers1

0

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

georgeawg
  • 48,608
  • 13
  • 72
  • 95