使用 ng-option 的角度选择在发布表单时发送索引而不是值答案

【问题标题】：Angular select with ng-option sends index instead of value when posting form使用 ng-option 的角度选择在发布表单时发送索引而不是值
【发布时间】：2013-05-26 18:58:59
【问题描述】：

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

来自jsfiddle.net/2SuZG：

<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，但答案是“不要担心价值”。但就我而言，我正在发布一个表格，所以我关心它的价值。我必须在这里遗漏一些非常基本的东西。谢谢！

【问题讨论】：

为什么要使用 jQuery 来serialize 表单？您正在使用 Angular...所以如果您的操作正确，您的表单应该在 $scope 中很好地表示。
序列化仅用于演示目的，我添加了更新以澄清。

标签： post angularjs html-select

【解决方案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}}" >

我不建议这样做，但这是您想要做的。

【讨论】：

+1 用于破解答案和最佳实践（序列化只是为了测试）。
我不得不使用ng-value="selectResource" 而不是value={{selectedResource}}

【解决方案2】：

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

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/

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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">

【讨论】：