AngularJS：使用输入字段更改 json 对象值（例如使用 ng-click）答案

【问题标题】：AngularJS: change json object values with input fields (with ng-click for instance)AngularJS：使用输入字段更改 json 对象值（例如使用 ng-click）
【发布时间】：2014-11-26 15:13:10
【问题描述】：

下面代码中的“myData”是我从 $http.get 响应中提取的一个 json 对象（我在我的网络应用程序初始化时调用该请求）。用户必须能够更改数据，因此我创建了下面的代码，其中的输入填充了该对象中的值。

<div ng-repeat="(parameter,value) in myData">
    <p>{{parameter}}</p>
    <!-- show only if val is defined (not 0 or null) -->
    <div ng-repeat="(par,val) in value" ng-show="val">
        <p>{{par}} : <input type="text" value={{val}}></p> <!-- val is the value the user can change, and par is  the parameter name such as in { parameter: "value" } -->
    </div>
</div>

我创建了用户在想要保存更改的数据时可以单击的按钮 (ng-click="saveData()")。

saveData 函数然后可以使用 $http.put(url,data) 在某处更新数据...

我不知道如何将整个对象传递给 saveData() 函数？我知道你可以通过像 saveData(myVariableOrObject) 这样添加它来传递所有内容，但我不知道在我的情况下我会如何做到这一点。

可能我在这里遗漏了一些东西，因为我对 angularJS 相当陌生。我的 html 输入是否应该有某种 ng-model 以某种方式将值连接到控制器？我可能会弄清楚这一点，但是对于整个对象，嗯？我需要再次在控制器函数中构造对象还是有更简单的方法？

如果有人能指出我正确的方向，我会很高兴。

如果我不清楚，请询问更多信息。

谢谢！

【问题讨论】：

试试 onclick="saveData(myData)"

标签： html json angularjs

【解决方案1】：

<input type="text" ng-model="myData[parameter][par]">

【讨论】：

【解决方案2】：

我认为 ng-form 是一个很好的解决方案： http://docs.angularjs.org/guide/forms

【讨论】：

hmm.. 我认为我的双重 ng-repeat 不能很好地使用它？我将如何定义 ng-model 值？
您可以将其定义为 Matjaz 回答 <input type="text" ng-model="myData[parameter][par]"> 并将 myData 对象传递给 ng-click 函数

【解决方案3】：

我写了一个快速的 JSFiddle，你可以在这里查看：http://jsfiddle.net/jakemulley/3AK79/1/

如您所见，“数据”链接到两个输入的ng-model 属性，这意味着您不需要value={{val}}。

另外，可能值得注意的是，表单可以具有ng-submit 属性，该属性在提交表单时调用内部函数（在本例中为save(user)）。

注意 1：此处提供的数据可以替换为您的http.get 数据。

注意 2： 通过传递 'user'，您可以获得用户名和显示名，您可以将其作为数据发布到 http.put。

这有帮助吗？

【讨论】：

谢谢，它确实有帮助，但不幸的是，上面的确切 ng-model 答案帮助更大！

【解决方案4】：

首先不是ng-onclick，而是ng-click。

其次，{{val}} 表达式是一种单向绑定。这意味着您的输入标签内的更改不会影响val 变量。您将需要使用 ng-model 进行双向绑定。之后，您可以轻松地 ng-click="saveData(myData)" 或只是 ng-click="saveData()" 并使用 $scope.myData 获取控制器内部的值。

【讨论】：

是的，我知道，我在标题中写对了，我的错 :) 感谢您的回答，尽管 Matjaz 的回答正是我所需要的