javascript - AngularJS:使 ng-model 在 ng-repeat 之外可用

标签 javascript angularjs angularjs-ng-repeat angular-ngmodel

在我的 AngularJS 应用程序中,我循环遍历数组对象并将值作为值发送到 radio 输入。总体思路是用户选择一个单选框和 $routeParams 后面的值。 不幸的是,变量 {{ modelSelected }} 在 ng-repeat 之外似乎不可用。为什么?第一个从不显示变量 {{ modelSelected }}

AngularJS 会在 ng-repeat 中创建一个 ScopeChild 吗?

Link to my jsfiddle example

<html ng-app>
    <body ng-init="models = [{name:'Sam'},{name:'Harry'},{name:'Sally'}]">
        <h3> Selected {{ modelSelected }} shown outside paragraph</h3>

        <div ng-repeat="model in models">
            <p>{{ model.name }} -
                <input ng-model="modelSelected" type="radio" name="patient" value="{{ model.name }}" required>
            </p>
             <h3> Selected {{ modelSelected }} shown inside paragraph</h3>

        </div>
    </body>
</html>

最佳答案

在处理原语或使用绑定(bind)时,通常会尝试在被绑定(bind)的模型属性中使用 .。因此,当创建子作用域时,原型(prototype)继承会将属性(引用类型)传递给子作用域。 (使用 $parent 几乎总是被认为是 hack)。在您的情况下,属性 modelSelected 是一个原语(即使它存在于父作用域中)并且 ng-repeat 创建了一个找不到此属性的子作用域(因为即使它存在,继承也不会继承它)并在其范围内创建一个新属性,因此对其所做的更改不会被外部范围看到。

将作用域上的一个属性初始化为一个对象,selection={} 在您的作用域中(在您的示例中它将是外部作用域)。并将模型绑定(bind)为 ng-model="selection.modelSelected

例如:-

<body ng-init="models = [{name:'Sam'},{name:'Harry'},{name:'Sally'}]; selection={}">
        <h3> Selected {{ selection.modelSelected }} shown outside paragraph</h3>

        <div ng-repeat="model in models">
            <p>{{ model.name }} -
                <input ng-model="selection.modelSelected" type="radio" name="patient" value="{{ model.name }}" required>
            </p>
             <h3> Selected {{ selection.modelSelected }} shown inside paragraph</h3>

        </div>
 </body>

Demo

阅读:Understanding Scopes

关于javascript - AngularJS:使 ng-model 在 ng-repeat 之外可用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25170939/

相关文章:

angularjs - Apache 上的未捕获错误 : [$injector:modulerr] Failed to instantiate module error on Angular. js 应用程序

javascript - 如何在 Angular 中访问动态添加的 DOM 元素?

javascript - 如何选择和操作表 jQuery 中的列

javascript - 使用 jQuery 将字符串从一个类替换为另一个类

javascript - force 属性始终未定义

javascript - 在每个 Controller 的开头运行一个函数

javascript - NG-if 不在 Angular localhost 上显示 AdSense 广告

javascript - 在 AngularJS 中使用 ngRepeat 减少 TH 标签

javascript - 使用 ng-repeat 时如何获取复选框的值?

javascript - 使用嵌入式网络聊天发送事件和了解用户操作