AngularJS-添加或编辑(动态）数据

AngularJS - add or edit (dynamic) data

本文关键字：动态 数据 编辑 添加 AngularJS-      更新时间：2023-09-26

好的，所以我有一个案例，假设有一个报告，并且可以有几个用户附加到该报告。用户当然是对象，所以我们有三种类型的信息：标题（字符串）描述（字符串）涉及（物体阵列）

现在，已经有一个预定义的对象数组供用户选择，所以自然的方法是使用select和ng选项，我已经这样做了。添加相关人员时，用户可以动态选择要添加的人数。编辑特定报告时，用户可以更改相关人员的值、删除人员或添加新人员。

到目前为止，我已经想出了这个（这是一个模拟，您可以编辑现有的报告，这些值来自web服务）：http://jsbin.com/poqiheputa/1/edit

很明显，如果我更改现有的相关人员并提交数据，则值不会更改。如果我添加一个人并将其设置为一个值，然后添加另一个人，则上一个值将消失。我在这里完全蒙在鼓里，所以非常感谢任何帮助！

您的问题是在包含在ng-repeat中的select中使用ng-model的方式。这个解释有点复杂，但我还是要试一下。

ng-repeat为每个迭代创建一个新的作用域。在单个迭代的范围内，然后创建一个select，ng-model为i。但是您没有意识到ng-model绑定是在该范围内创建的，而不是父范围。现在，当您修改involved集合时，ng-repeat会重新触发，并且会重新创建子作用域。由于该值从未传播到父作用域，因此它现在已丢失。您可以通过在某个位置添加{{involved|json}}来观察这一点。

有几种方法可以解决这个问题。

一般的经验法则是，你的ng-model中应该始终有一个点。实际上，这意味着ng-model绑定应该引用对象上的一个属性，如下所示：ng-model="model.property"和父作用域应该有一个名为model的属性。然而，在您的情况下，ng-model="involved[$index]"似乎是一个更好的选择。

这一切的原因都与原型遗传有关。当您创建一个子作用域时，它从其父作用域继承属性，如下所示：

parent.foo = 1;
child.foo === 1; // this is true even if nobody sets child.foo

但是，如果您设置子属性的值，它将仅在子范围内覆盖它：

parent.foo = 1;
child.foo === 1; // true
child.foo = 2;
child.foo === 2; // true
parent.foo === 1; // still true -- child now has its own, overriding foo property

但如果你使用对象或数组，情况会有所不同：

parent.foo = { bar = 1 };
child.foo.bar === 1; // true
child.foo.bar = 2;
parent.foo.bar === 2; // true!

这可能看起来有点令人惊讶，但原因实际上很简单：子作用域从其父作用域继承了foo对象引用，由于它是一个引用，对其一个属性的赋值将像应该的那样到处传播。由于数组也是对象引用，因此在ng repeat中involved[$index]也适用相同的逻辑。

相关文章：