Question

AngularJS的第一步。我遇到了与this相关的奇怪问题，但解决方案对我不起作用，也许我错过了一些东西（正如我所说，我真的很喜欢角）。

我的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>

这是我的相关控制器：

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对象，并且我注意到它在单击单选按钮时没有更新。我认为绑定没问题：我试图改变模型中的值，应用程序选择相应的单选按钮。

任何帮助都非常感激，我已经坚持了好几个小时

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}}

Answer 2

工作正常

只需更改

$scope.userSelected

到

$scope.userSelected.selected

<强> Working Code

<强>脚本

var app = angular.module('app', []);

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

   }
   return data
});

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

<强> HTML

<div ng-app="app" 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="userSelected.selected" value="{{option.id}}" id="{{option.id}}">{{option.text}}
             </div>
        </div>
            {{userSelected.selected}}
    </div>
</div>

AngularJS - 单选按钮不更新模型

2 个答案: