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!