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

时间:2014-05-05 08:39:26

标签: json forms angularjs angularjs-scope

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

  • 我用范围array和ng-init填充输入。
  • 使用范围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>

纳克         添加

 </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){

}

1 个答案:

答案 0 :(得分:1)

我已经创建了working Plunker来解决您的问题。

您的代码中有两个问题:

1)ng-init="array.age"应为ng-init="fields.age=array.age",其他ng-init应为fields。 您没有在$scope.array = { "name": "Hello", "age": "18" }; 中保存该值,因此未对其进行更新。

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

您应该将数组定义为:

array.name

或者在HTML模板中更改对数组的调用:

array[0].name - &gt; array.age

array[1].age - &gt; 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


修改

Updated Plunker

正确使用ng-options

ng-options="productOwner in productOwners"

因此,我已将您的ng-options从ng-options="productOwner.id for productOwner in productOwners"更改为label for value in array,其类型为label,其中productOwner.idproductOwner值为对象ng-init

此外,由于fields.po_id在初始化时没有值,因此不需要ng-init ="fields.po_id = productOwners[0]"

但是如果你想初始化这个值,你可以这样做:

{{1}}