2

I am trying to do something straight forward with Onsen UI -- automatically uncheck some checked switches. So, I have a number of switches and I want to mimic the radio-button behaviour (basically toggling one sets all others to non-checked).

I am using angular and I get this error when i try to do it from code.

Uncaught TypeError: document.getElementsByTagName(...)[0].setChecked is not a function(…)

Basically I tried

$scope.$on('toggle', function(event, data) {        
            $scope.selected[data] = event.targetScope.model;
            for (i = 0; i < $scope.selected.length; i++) {
                if (i != data) {
                    $scope.selected[i] = !$scope.selected[data];
                }
            }
        });

All my switches are added dynamically using:

> var h = '<ons-list-item><div class="center">' + placeResult.name
>                   + '</div><div class="right"><ons-switch id="switch' + i
>                   + '" "ng-model="mySwitch' + i
>                   + '" ng-click="$emit(\'toggle\',' + i
>                   + ')"></ons-switch> </div></ons-list-item>';

I don't know if dynamically adding them basically has any issues?

I tried the same code with the preset switches and it works.

Thanks

ilijaluve
  • 1,050
  • 2
  • 10
  • 24
  • 1
    Are you manually calling `.setChecked(true)`? That's v1. Try `.checked = true` for v2. – Fran Dios Nov 11 '16 at 04:13
  • I tried that as well, doesn't work. document.getElementsByTagName("ons-switch")[0].checked undefined – ilijaluve Nov 11 '16 at 20:14
  • 1
    This isn't angular so I didn't give it as an answer, but here is a working example with vanilla: https://codepen.io/anon/pen/zoqdQm – Munsterlander Nov 13 '16 at 02:50
  • 1
    This was my first attempt. That works if you have static elements. For me it does not work when I dynamically add events. It just does not change the toggle. – ilijaluve Nov 14 '16 at 02:33

1 Answers1

1

From what I understand, you are trying to make a number of checkboxes with one master checkbox whose checked status is mimicked by all the other boxes/switches.

If this is the case, in Angular you can easily use ng-checked directive. Here is an example:

<input type="checkbox" ng-model="check-all">Check all<br>
<input type="checkbox" ng-checked="check-all">Option 1<br>
<input type="checkbox" ng-checked="check-all">Option 2<br>
<input type="checkbox" ng-checked="check-all">Option 3
CapeAndCowl
  • 370
  • 2
  • 14
  • Not quite. I want to have the radio box effect. So once I toggle one switch to on, all the rest would automatically be off. – ilijaluve Nov 11 '16 at 20:14