Attiva/disattiva pulsante in base alla selezione del pulsante di opzione in AngularJS

Question

Sono presenti voci nell'elenco dei pulsanti di opzione (utilizzando ng-repeat) con un button (inizialmente disabilitato con ng-disabled) per continuare. Quando viene selezionato un pulsante di opzione, desidero attivare il pulsante "Continua".

Qual è il modo giusto per farlo in Angular?

JS rilevanti:

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

Rilevante 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

Grazie!

Answer 1

ngRepeat crea un nuovo ambito, che è un ambito secondario dell'ambito utilizzato dal pulsante. È possibile risolvere il problema utilizzando

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

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

Ma una soluzione migliore sarebbe quella di aggiornare un oggetto che è già nel campo di applicazione:

$scope.userChoice = {}; 

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

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

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