Question

当我发布带有Angular select的表单时，它会发送所选选项的数组索引，而不是其值。我需要发送字符串，因为服务器不知道这些索引。我该如何解决这个问题？

<form method="post" action="/my/post/endpoint">
    <select name="resource" ng-options="r for r in ['a', 'b']"
            ng-model="selectedResource"></select>
    <button type="submit">Save</button>
</form>

您可以从小提琴中的控制台输出中看到发布的表单正在发送resource=0，但我想要resource='a'。 （注意：在我的小提琴中，我正在序列化表单，但这只是为了看它会发布什么。在我的应用程序中，我实际上是发布到真正的端点。）

这类似于this question，但答案是“不要担心价值”。但在我的情况下，我发布了一个表格，所以我关心价值。我必须在这里遗漏一些非常基本的东西。谢谢！

Answer 1

您不应该使用jquery序列化表单，因为您拥有$ scope中的所有相关数据，这就是您要序列化的内容（某些子集或某些对象，您将使用$ http或$资源）。如果您使用自己的方法设置了死区，请使用数据元素的真实名称创建隐藏输入：http://jsfiddle.net/2SuZG/1/

<select name="resourceTemp" ng-options="r for r in ['a', 'b']"
        ng-model="selectedResource"></select>
<input type="hidden" name="resource" value="{{selectedResource}}" >

我不推荐这个，但这是你想要做的。

Answer 2

ng-option适用于数组。如果你想使用像这样的ng-option make数组

r = [{ "value": 1, "text": "a" }, { "value": 2, "text": "v" }];  

<select ng-option="obj.value as obj.text for obj in r">

或者您可以在案例中使用ng-repeat

<form method="post">
        <select name="resourceTemp" ng-model="selectedResource">
            <option ng-repeat="r in ['a','b']" value="{{r}}">{{r}}</option>
        </select>
        <input type="hidden" name="resource" value="{{selectedResource}}" >
        <button type="submit">Save</button>
</form>

http://jsfiddle.net/nHyET/

Answer 3

简单的答案是不发表表格。如果您想将POST数据发送到端点，请使用$http或$resource。

查看Mark Rajcok对文档的评论：http://docs.angularjs.org/api/ng.directive:select

Answer 4

如果您无论如何都需要解决这个问题，并且使用AngularJS，那么良好做法不适用，导致匆忙或需要进行大规模更改，试试这个（它对我有用）：

<select id="resourceTemp" ng-model="selectedResource">
   <option ng-repeat="r in ['a','b']" value="{{r}}">
      {{r}}
   </option>
</select>

<input type="hidden" name="resourceTemp" ng-value="selectedResource">

发布表单时，使用ng-option进行角度选择会发送索引而不是值

4 个答案: