3. Onsen radio list binding with AngularJS

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Onsen radio list binding with AngularJS

  • D

    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!

    0
  • D

    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!

    0