AngularJS-单选按钮不更新模型

AngularJS - radio button not updating model

本文关键字：模型 更新 单选按钮 AngularJS-      更新时间：2023-09-26

AngularJS中的第一步。我面临着一个与此相关的奇怪问题，但解决方案对我不起作用，也许我错过了什么（正如我所说，我真的是一个有棱角的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>

这是我的相关控制器：

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对象，并且我注意到当单击单选按钮时它没有更新。我认为绑定是可以的：我已经尝试更改Model中的值，应用程序选择相应的单选按钮。

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

您可以删除中间变量$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}}

它工作良好

只需更改

$scope.userSelected

至

$scope.userSelected.selected

工作代码

脚本

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>
相关文章：