javascript - AngularJS - 单选按钮不更新模型

Question

AngularJS 的第一步。我面临一个与 this 相关的奇怪问题，但该解决方案对我不起作用，也许我错过了一些东西(正如我所说，我真的是一个 Angular n00b)。

我是我的 HTML，我正在构建一些这样的单选按钮:

<div ng-Controller="PageTwo" >
    <h3>General Information > Knowledge About </h3>
          <div>
        <b>User</b>
        <div>
            <div ng-repeat="option in userOptions">
                <input type="radio" name="userGroups" ng-model="$parent.userSelected" value="{{option.id}}" id="{{option.id}}">{{option.text}}
                        </div>          
            </div>
            Selected thing: {{userSelected}}

        </div>
    </div> 

这是我的相关 Controller :

uxctModule.controller ('PageTwo', function ($scope, ModelData){
    $scope.data = ModelData;
    $scope.userOptions = [{text:'Option 1', id:0}, {text:'Option 2', id:1}, {text:'Option 3',id:2},  {text:'Option 4', id:3}];;
    $scope.userSelected = ModelData.knowledgeAboutUser;
});

模型是以下对象

uxctModule.factory ("ModelData", function () {
   var data = {
            // more code here
        knowledgeAboutUser : 3,

   }
   return data
});

现在，问题是我正在控制台中登录 ModelData 对象，并且我注意到单击单选按钮时它没有更新。 我认为绑定(bind)没问题:我尝试更改模型中的值，并且应用程序选择相应的单选按钮。

非常感谢任何帮助，我在这个问题上坚持了几个小时

Answer 1

您可以删除中间变量$scope.userSelected:

<div ng-repeat="option in userOptions">
    <input type="radio" name="userGroups" ng-model="data.knowledgeAboutUser" value="{{option.id}}" id="{{option.id}}">{{option.text}}         
</div>
Selected thing: {{data.knowledgeAboutUser}}