Question

在我的AngularJS应用程序中，我循环遍历数组对象并将值作为值发送到无线电输入。总体思路是用户选择一个单选框，并将值作为$ 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>

Answer 1

在处理基元或使用绑定时，通常尝试在绑定的模型属性中使用.。因此，当创建子范围时，原型继承将向下传递属性（它们是引用类型）。（使用$parent几乎总是被认为是黑客攻击）。在您的情况下，属性modelSelected是一个原语（即使它出现在父作用域上），ng-repeat创建一个子作用域，它不会找到此属性（因为继承不会将其记录下来，即使它存在）并在其范围内创建一个新属性，因此对其进行的更改不会在外部范围内看到。

将范围上的属性初始化为范围内的对象selection={}（在您的示例中，它将是outerscope）。并将模型绑定为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

Answer 2

是。它确实创建了一个继承父作用域的新作用域。使用$ parent.modelSelected访问父范围的变量。

<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="$parent.modelSelected" type="radio" name="patient" value="{{ model.name }}" required>
        </p>
         <h3> Selected {{ modelSelected }} shown inside paragraph</h3>

    </div>
</body>

Answer 3

{{modelSelected}}之外的ng-repeat不可用，因为AngularJS中的范围有效（参见https://docs.angularjs.org/guide/scope）

范围按层次结构排列，模仿应用程序的DOM结构

因为您尝试访问<h3>对象的{{modelSelected}}元素超出了迭代器的范围，所以该对象不可用。

AngularJS：在ng-repeat之外提供ng-model

3 个答案: