angularjs - Focusing on input should select a radio button -


this might seem easy thing can't find neat way of achieving want...

i have rows contains values taken array in scope. these rows contain radio input each , 1 of them contain text input.

the original array looks like:

$scope.items = [     {name: 'one', value: 1, checked: true},     {name: 'two', value: 2},     {name: 'custom', value: 0, custom: true} ]; 

to make simpler understand prepared demo here show how looks.

the expected behaviour first row gets selected @ initialisation time. focusing on text input should check corresponding radio input. behaviour seems work fine first time focus on input. after that, if radio button checked, focusing in input doesn't tick matching radio button...

i tried wrapping whole row or input in label linked radio button doesn't work either.

if of know how handle scenario in neat way, i'm eager know!

when select item pickitem function change item.check property. don't change when check radio buttons label. way model become desyncronized. possible solution add ng-focus="pickitem(item)" on radio fix model in case label used.

here fixed code, corrected html little, added missing </label>:

<div class="row" ng-repeat="item in items">     <input type="radio" id="radio-{{$index}}" name="foo" ng-checked="item.checked" ng-focus="pickitem(item)">      <label for="radio-{{$index}}">         {{item.name}}:         <span ng-if="!item.custom">{{item.value}}</span>     </label>      <input type="tel" ng-if="item.custom" ng-model="item.value" ng-focus="pickitem(item)">      <label for="radio-{{$index}}">         <span>x 10 = {{10 * item.value}}</span>     </label> </div> 

demo: https://jsfiddle.net/rfgpz367/3/


Comments

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -