Javascript AngularJS：使ng模型在ng repeat之外可用_Javascript_Angularjs_Angularjs Ng Repeat_Angular Ngmodel

Javascript AngularJS：使ng模型在ng repeat之外可用

javascript angularjs

Javascript AngularJS：使ng模型在ng repeat之外可用,javascript,angularjs,angularjs-ng-repeat,angular-ngmodel,Javascript,Angularjs,Angularjs Ng Repeat,Angular Ngmodel,在我的AngularJS应用程序中，我通过数组对象循环，并将值作为值发送到无线电输入。总体思路是，用户选择一个单选框，并使用$routeParams的back部分返回值不幸的是，变量{{modelSelected}}在ng repeat之外似乎不可用。为什么？第一个从不显示变量{{modelSelected} AngularJS是否在ng repeat中创建ScopeChild 选定的{{modelSelected}}显示在段落外部 {{model.name}- 选定的{{modelSel

在我的AngularJS应用程序中，我通过数组对象循环，并将值作为值发送到无线电输入。总体思路是，用户选择一个单选框，并使用$routeParams的back部分返回值不幸的是，变量
{{modelSelected}}
在ng repeat之外似乎不可用。为什么？第一个从不显示变量

{{modelSelected}

AngularJS是否在ng repeat中创建ScopeChild


选定的{{modelSelected}}显示在段落外部
{{model.name}-

选定的{{modelSelected}}显示在段落内

是。它确实创建了一个继承父作用域的新作用域。使用$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>


选定的{{modelSelected}}显示在段落外部
{{model.name}-

选定的{{modelSelected}}显示在段落内

由于AngularJS中作用域的工作方式，

{{modelSelected}}

在

ng repeat

之外将不可用（请参阅）

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

因此，由于您试图从中访问

{{modelSelected}}

对象的

元素不在迭代器的作用域内，因此该对象不可用。

在处理原语或使用绑定时，通常尝试在绑定的模型属性中使用

。因此，当创建子作用域时，原型继承将把属性（即引用类型）向下传递到子作用域。（使用

$parent

几乎总是被认为是一种黑客行为）。在您的案例中，属性

modelSelected

是一个基元（即使它存在于父作用域中），并且

ng repeat

创建一个子作用域，但该子作用域找不到此属性（因为继承即使存在也不会向下传递），并在其作用域上创建一个新属性，因此，对其所做的更改不会显示在外部范围中

将作用域上的属性初始化为作用域中的对象，

selection={}

（在您的示例中，它将是outerscope）。并将模型绑定为

ng model=“selection.modelSelected

例：-


选定的{{selection.modelSelected}}显示在段落外部
{{model.name}-

选定的{{selection.modelSelected}}显示在段落内

阅读：

与使用

$parent

相比，我更喜欢这样做。这是一种更好的做法，您不必使用

$parent.$parent.$parent

来获得所需范围内的变量。@sharpieone我非常同意，除了孩子需要知道父对象本身的存在之外，这不是一个好方法事情。我也喜欢scope变量的方式。已经实现了，它工作得很好。谢谢你的解释。非常感谢。有几种方法可以做到这一点。你不是真的回答这个问题，只是重复这个问题。嗨，伊恩，谢谢你链接到scope文档。谢谢你的回答。阅读后考虑到不同的答案，我想我更喜欢@PSL reply和范围变量。我担心我会开始链接$parent变量。当然。np。我最初打算在父范围中添加另一个变量，但为了简洁起见，只是将您指向$parent。显然，在任何地方使用$parent都不好，但在本例中没有这样做em不合理。不过@PSL的解释很好。

<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>

<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>