Question

我有一个像这样的HTML

<select data-ng-model="selection">
    <option value="">Select Search</option>
    <option value=1>One</option>
    <option value=2>Two</option>
    <option value=3>Three</option>
</select>
<input type="text" placeholder="search One" data-ng-model="search.one" data-ng-if="selection==1"/>
<input type="text" placeholder="search Two" data-ng-model="search.two" data-ng-if="selection==2"/>
<input type="text" placeholder="search Three" data-ng-model="search.three" data-ng-if="selection==3"/>
Selected: {{selection}}
Search by: {{search}}

在上面的代码中，如果选择了某个选项，则可以看到与该选项关联的文本框。但是，如果在文本框中输入了一些输入，则变量search（上面代码中的'搜索'字段）不会更新。但如果我删除data-ng-if，则search变量会正确更新。

如何使用search更新data-ng-if变量？

谢谢！

Answer 1

尝试data-ng-model="$parent.search.one"

Answer 2

这是因为ng-if，ng-repeat，ng-switch，ng-view和ng-includes等指令都创建了新的子范围。

要防止它在子范围内创建其属性，您应该使用：

data-ng-model="$parent.search.one"

有关此主题的更好说明，请访问：https://github.com/angular/angular.js/wiki/Understanding-Scopes

它将清除你所有的疑虑。

Answer 3

以下是解决方案Angularjs ng-model doesn't work inside ng-if

您必须使用$parent来引用父范围。

data-ng-model="$parent.search.one"
data-ng-model="$parent.search.two"
data-ng-model="$parent.search.three"

Answer 4

也许你的控制器中有一些奇怪的东西，但在这个JSFiddle中，选择一个新选项并更改文本字段中的值会更新{{search}}中的值。 https://jsfiddle.net/xx3bsafk/

基于这个其他线程，我的工作是因为ng-model字段中的ng-if s绑定到对象的子节点而不是对象本身（如果您试图编辑对象本身，javascript会自动创建一个新的对象实例而不是引用对象本身 - 因为如果像每个人都说的那样创建一个新的范围。）

Angularjs ng-model doesn't work inside ng-if

data-ng-model不使用data-ng-if更新

4 个答案: