Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>OK, so after further review, I decided to go with a more "mix-in" approach, just replacing the ng-model directive with my own custom directive, in essence. This is very similar to the approach I used for making a "checkbox list" directive based on this answer: <a href="https://stackoverflow.com/a/14519881/561604">https://stackoverflow.com/a/14519881/561604</a>.</p> <pre><code>.directive('radioOptions', function() { // Apply this directive as an attribute to multiple radio inputs. The value of the attribute // should be the scope variable/expression which contains the available options for the // radio list. Typically, this will be the collection variable in an ng-repeat directive // that templates the individual radio inputs which have radio-options applied. In addition, // instead of the normal ng-model, use a selected-option attribute set to the same expression. // For example, you might use radio-options like this: // &lt;label ... ng-repeat="item in collection"&gt; // &lt;input type="radio" ... ng-value="item" radio-options="collection" selected-option="myModel.myProperty"&gt; // &lt;/label&gt; // // See https://stackoverflow.com/questions/19281404/object-equality-comparison-for-inputradio-with-ng-model-and-ng-value // for the SO question that inspired this directive. return { scope: { radioOptions: '=', selectedOption: '=', ngValue: '=' }, link: function( scope, elem, attrs ) { var modelChanged = function() { if( jQuery.isArray(scope.radioOptions) ) { jQuery.each( scope.radioOptions, function(idx, item) { // This uses our models' custom 'equals' function for comparison, but another application could use // ID propeties, etc. if( typeof item.equals === 'function' &amp;&amp; item.equals(scope.selectedOption) ) { elem.prop( 'checked', item === scope.ngValue ); } }); } }; scope.$watch( 'radioOptions', modelChanged ); scope.$watch( 'selectedOption', modelChanged ); var viewChanged = function() { var checked = elem.prop( 'checked' ); if( checked ) { scope.selectedOption = scope.ngValue; } }; elem.bind( 'change', function() { scope.$apply( viewChanged ); }); } }; }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload