AngularJS - ngrepeat中的ngmodel没有更新('dotted'ngmodel)

Question

我正在尝试使用角度数组绘制radioBoxes,然后获得已检查无线电的值,但模型不会改变它的值,任何人都可以帮我这个吗？

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>

角部

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/

Answer 1

你需要设置$scope.radio为这样的对象:

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

然后从html访问它,如下所示:

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

这是一个有效的jsfiddle

您可以在这个答案中了解为什么这是必要的

来自angularjs docs:

范围继承通常很简单,你通常甚至不需要知道它正在发生......直到你尝试双向数据绑定(即表单元素,ng-模型)到一个原语(例如,数字,字符串, boolean)在子范围内从父范围定义.它不像大多数人期望的那样工作.会发生什么是子范围获取其自己的属性,该属性隐藏/隐藏同名的父属性.这不是AngularJS正在做的事情 - 这就是JavaScript原型继承的工作原理.

...

有一个 '.' 在你的模型中将确保原型继承发挥作用.所以,使用

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

而不是

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

如果您确实需要/需要使用原语,则有两种解决方法:

在子范围中使用$ parent.parentScopeProperty.这将阻止子范围创建自己的属性.在父作用域上定义一个函数,并从子作业中调用它,将原始值传递给父作用域(并非总是可行)