Schaltfläche aktivieren/deaktivieren basierend auf Optionsfeldauswahl in AngularJS

Question

Ich habe Elemente in einer Optionsfeldliste (unter Verwendung von ng-repeat) mit einer button (zunächst deaktiviert mit ng-disabled), um fortzufahren. Wenn ein Optionsfeld ausgewählt ist, möchte ich die Schaltfläche "Weiter" aktivieren.

Was ist der richtige Weg, dies in Angular zu tun?

Relevante JS:

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

Relevante 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

Dank!

Answer 1

ngRepeat erstellt einen neuen Bereich, bei dem es sich um einen untergeordneten Bereich des Bereichs handelt, der von der Schaltfläche verwendet wird. Sie können das Problem beheben, indem

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

Siehe unter Verwendung http://jsfiddle.net/UZkM8/1/

aber eine bessere Lösung wäre, ein Objekt zu aktualisieren, die bereits im Rahmen ist:

$scope.userChoice = {}; 

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

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

http://jsfiddle.net/UZkM8/3/ Sehen Sie diese Werke