AngularJS - 在ng-repeat中使用的ng-model未更新（'dotted' ng-model）

Question

我希望您能帮助我使用angular数组绘制单选框，并在选择后获取所选单选框的值，但是模型没有改变其值。请问是否有任何人可以帮助我？

HTML部分：

<div ng-app>
    <div ng-controller="CustomCtrl">
        <label ng-repeat="user in users">
            <input type="radio" name="radio" ng-model="radio" value="{{user.name}}" /> {{user.name}} 
        </label>
        <br/>
        {{radio}}
        <br/>
        <a href="javascript:void(0)" ng-click="saveTemplate()">Save</a>
    </div>
</div>

Angular部分

function CustomCtrl($scope) {
    $scope.radio = "John";
    $scope.users = [
        {"name" : "John", "Year" : 18},
        {"name" : "Tony", "Year" : 19}
    ];

    $scope.saveTemplate = function() {
        console.log($scope.radio);
    };
}

您可以在此处查看示例 - http://jsfiddle.net/hgf37bo0/2/

这是一个关于IT技术的参考链接，其中包含了示例代码。

- Hayk Aramyan

Answer 1

您需要将$scope.radio设置为如下对象：

$scope.radio = {
  name: 'John'
}

然后像这样从 HTML 访问它：

<input type="radio" name="radio" ng-model="radio.name" value="{{user.name}}" />

这里有一个可工作的jsfiddle

你可以在这个answer中了解为什么这是必需的。

来自angularjs文档:

作用域继承通常很简单，甚至您可能不需要知道它正在发生...直到您尝试从子作用域内部将双向数据绑定(即，表单元素、ng-model)到父作用域上定义的原始值类型（例如，数字、字符串、布尔值）。它不会按照大多数人期望的那样工作。所发生的是，子作用域获取了它自己的属性，隐藏/遮蔽了相同名称的父级属性。这不是AngularJS正在做的——这是JavaScript原型继承的工作方式。

...

在模型中使用“。”，可以确保原型继承正常运行。因此，请使用

<input type="text" ng-model="someObj.prop1"> 

与其；不如

<input type="text" ng-model="prop1">

如果你真的想/需要使用一个原始值，有两个解决方案：

在子范围中使用$parent.parentScopeProperty。这将防止子范围创建自己的属性。在父级范围上定义一个函数，并从子级调用它，将原始值传递到父级（不总是可行）。

- Nitsan Baleli