Onsen radio list binding with AngularJS

DougiUK

Hello everyone I’m doing a simple settings page that has a radio list in it as follows.

        <ons-list-item modifier="tappable">

          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a" checked="checked">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Blank paper
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Single axis (horizontal)
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Double axis / quadrants
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a">
            <div class="radio-button__checkmark radio-button--list-item__checkmark" ></div>
            3 columns
          </label>
        </ons-list-item>
        
      </ons-list>

I can’t find any documentation showing how to bind the radio buttons to an angularjs object though.

I noticed this article http://monaca.mobi/en/blog/lets-use-onsen-ui-to-manipulate-data-with-monaca-backend/ mentions a directive “ons-radio-button” that appears to support data binding, but it didn’t seem to do anything at all when I tried it.

Any pointers please? Thank you!

DougiUK

In case it’s helpful to anyone, I worked it out as follows:

<ons-list modifier="inset" class="settings-list">

        <ons-list-item modifier="tappable" ng-click="$root.CurrentSession.bgType = 0">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a" ng-checked="$root.CurrentSession.bgType == 0 ? true : false">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Blank paper
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable" ng-click="$root.CurrentSession.bgType = 1">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a" ng-checked="$root.CurrentSession.bgType == 1 ? true : false">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Single axis (horizontal)
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable" ng-click="$root.CurrentSession.bgType = 2">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a" ng-checked="$root.CurrentSession.bgType == 2 ? true : false">
            <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
            Double axis / quadrants
          </label>
        </ons-list-item>

        <ons-list-item modifier="tappable" ng-click="$root.CurrentSession.bgType = 3">
          <label class="radio-button radio-button--list-item">
            <input type="radio" name="a" ng-checked="$root.CurrentSession.bgType == 3 ? true : false">
            <div class="radio-button__checkmark radio-button--list-item__checkmark" ></div>
            3 columns
          </label>
        </ons-list-item>
        
      </ons-list>

Works a charm now. Loving Onsen!

Onsen radio list binding with AngularJS browsing