current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
1

I have items in a radio button list (using ng-repeat) with a button (initially disabled with ng-disabled) to continue. When a radio button is selected, I want to enable the "Continue" button.

What's the right way to do this in Angular?

Relevant JS:

$scope.companies = [{
        "id": 3,
        "name": "Twitter"
    }, {
        "id": 2,
        "name": "Google"
    }, {
        "id": 1,
        "name": "Apple"
    }]

Relevant HTML:

<table>
  <tr ng-repeat="company in companies">
     <td>
       <input type="radio" ng-model="companyId" name="companyId" value="{{company.id}}" />{{company.name}}
      </td>
  </tr>
</table>

<button ng-disabled="!companyId">Continue</button>

Jsfiddle

Thanks!

share|improve this question

1 Answer 1

up vote 5 down vote accepted

ngRepeat creates a new scope, which is a child scope of the scope used by the button. You can fix it by using 

<input type="radio" ng-model="$parent.companyId" .../>

See http://jsfiddle.net/UZkM8/1/

But a better solution would be to update an object that is already in the scope:

$scope.userChoice = {};

<input type="radio" ng-model="userChoice.companyId" .../>

<button ng-disabled="!userChoice.companyId">Continue</button>

See http://jsfiddle.net/UZkM8/3/

share|improve this answer
    
This works perfectly. Didn't realize that ng-repeat created a new scope. Thanks JB! –  jetcom Aug 10 '13 at 22:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.