Onsen radio list binding with AngularJS



  • 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!



  • 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!


Log in to reply