AngularJS ng-repeat下使用ng-model

1 2 3

blue:<input type="radio" value="1" ng-model="selectValue"/> red:<input type="radio" value="2" ng-model="selectValue"/> yellow: <input type="radio" value="3" ng-model="selectValue"/>

以上代碼實現一個單選框功能，當你選中其中的一個單選框，能夠從$scope.selectValue中獲得你選中的的選項的value。
同時改變$scope.selectValue的值，也能夠讓界面上選中相應的單選框。

假設單選框的個數是不固定的，用ng-repeat來展示。

1 2 3 4 5 6 7

<table> <tr ng-repeat="row in collections"> <td> {{row.name}}: <input type="radio" value="{{row.value}}" ng-model="selectValue"/> </td> </tr> </table>

當你書寫了上述代碼後。你會發現點擊其中的對話框，$scope.selectValue中並無保存你選中的對應單選框的值。

這是由於處在ng-repeat之間的代碼，對全局的$scope裏變量的內容是不可見的，像{{row.name}}裏的row，並非全局$scope裏的成員。
而是爲ng-repeat建立的子scope裏面的。因此要引用全局$scope裏的成員，你能夠使用$parent 來引用全局的$scope

1 2 3 4 5 6 7

<table> <tr ng-repeat="row in collections"> <td> {{row.name}}: <input type="radio" value="{{row.value}}" ng-model="$parent.selectValue"/> </td> </tr> </table>