在 AngularJS 中以相同的形式提交和编辑值

Question

我刚刚开始使用 AngularJS。 我想以相同的形式发送和编辑值。 这是我的方法：

• 我使用 ng-init 在输入范围内填充 array。
• 在fields 范围内，当我单击提交按钮时，我会存储新值。

但它似乎不起作用......我不明白为什么。

index.html

 <form class="form" name="myForm" novalidate>

    <div class="col span12 input"><input type="text" ng-model="fields.name" ng-init="array.name" required /></div>

    <div class="col span12 input"><input type="text" ng-model="fields.age" ng-init="array.age" required /></div>

    <select ng-model="fields.po_id" ng-init="fields.po_id" ng-options="productOwner in productOwners" required></select>

ng 添加

 </form>

controllers.js

$scope.productOwners =
[
    {
        "id": 1
    },
    {
        "id": 2
    },
    {
        "id": 3
    },
    {
        "id": 4
    },
];

$scope.array =
[
    {
        "name": "Hello"
    },
    {
        "age": "18"
    },
    {
        "po_id": "2"
    }
]; 

$scope.submit = function(fields){

}

Answer 1

我创建了一个working Plunker 来解决您的问题。

您的代码中有两个问题：

1) ng-init="array.age" 应该是 ng-init="fields.age=array.age" 和另一个 ng-init 相同。 您没有保存 fields 中的值，因此它没有更新。

2) 你的数组定义有问题。

您应该将数组定义为：

$scope.array = {
        "name": "Hello",
        "age": "18"
    }; 

或者像这样在 HTML 模板中更改对数组的调用：

array.name -> array[0].name

array.age -> array[1].age

---

编辑：

Updated Plunker

ng-options的正确用法是

for array data sources:
   label for value in array
   select as label for value in array
   label group by group for value in array
   select as label group by group for value in array
for object data sources:
   label for (key , value) in object
   select as label for (key , value) in object
   label group by group for (key, value) in object
   select as label group by group for (key, value) in object

所以我已将您的 ng-options 从 ng-options="productOwner in productOwners" 更改为 ng-options="productOwner.id for productOwner in productOwners"，其类型为：label for value in array，其中 label 是 productOwner.id，值是对象 productOwner。

此外，ng-init 不需要，因为fields.po_id 在初始化时没有任何值。

但是如果你想初始化值，你可以这样做：

ng-init ="fields.po_id = productOwners[0]"