在 Angular Material 中提交选择选项值

Question

HTML：

<form id="reg" name="reg" enctype="application/x-www-form-urlencoded" action="http://api.phphotspot.com/v-2/client-register" method="post">
    <md-input-container class="md-block">
         <label for="country">Country</label>       
         <md-select name="country"  ng-model-options="{trackBy: '$value.id'}" id="country" ng-model="signupFormData.country" placeholder="Select a Country">
            <md-option ng-value="opt" ng-repeat="opt in countries">{{opt.name}}</md-option >
        </md-select>
    </md-input-container>
    <md-button ng-submit class="md-raised md-primary">Register</md-button>
</form>

JS：

<script>
    angular.module('signUpNewUser', ['ngMaterial'])
        .controller('signUpFormController', function($scope) {
             $scope.signupFormData = {};
             $scope.countries = [
                   {id:"AU", name:"Australia"},
                   {id:"BR", name:"Brazil"},
                   {id:"CA", name:"Canada"},
                   {id:"IT", name:"Italy"},
                   {id:"GB", name:"United Kingdom"},
                   {id:"US", name:"United States"}];
            });
</script>

我想在用户点击按钮时提交所选国家。例如当用户选择国家Australia并提交时，在服务器端$_POST['country']应该等于"AU"。但目前$_POST['country'] 变为字符串"Object" 而不是"AU"。

有人可以帮我解决这个问题吗？

---

我把 html 改成了，

<form id="reg" name="reg" enctype="application/x-www-form-urlencoded" action="http://api.phphotspot.com/v-2/client-register" method="post">
    <md-input-container class="md-block">
         <label for="country">Country</label>       
         <md-select name="country"  ng-model-options="{trackBy: '$value'}" id="country" ng-model="signupFormData.country" placeholder="Select a Country">
            <md-option ng-value="opt.id" ng-repeat="opt in countries">{{opt.name}}</md-option >
        </md-select>
    </md-input-container>
    <md-button ng-submit class="md-raised md-primary">Register</md-button>
</form>

现在有一个奇怪的行为。当我在 php 中 var_dump $_POST 值时，

array (size=1)
  '_country' => string '? string:AU ?' (length=13)

在字段名称中添加下划线..！此外，该值仍然不是预期的“AU”。

Answer 1

为您的ng-value 使用opt.id 而不仅仅是opt，因为它包含您要发布的值。

Answer 2

对于您问题的前半部分（关于值不正确），我不完全确定我的建议是否会有所帮助。如果您接受下面的建议，它可能会有所帮助。当我按照我解释的方式查看返回的数据时，它是正确的。

关于前面的下划线，我也发生过类似的事情，我无法在任何地方在线找到解决方案。我个人通过添加一个隐藏的输入框来解决这个问题，其中包含我想要的值，甚至使用与原始输入框相同的 name 属性，并且它没有下划线发布。

例如：

angular
    .module('app', ['ngMaterial'])
    .controller('DemoController', DemoController);

DemoController.$inject = [];

function DemoController() {
    var vm = this;
    
    vm.options = [
        {id: 45, name: 'Massachusetts'},
        {id: 46, name: 'Alaska'},
        {id: 47, name: 'Virginia'},
        {id: 48, name: 'Utah'},
        {id: 49, name: 'Florida'}
    ];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-animate.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.js"></script>

<div ng-app="app" ng-controller="DemoController as vm">
  <form>
    <label>A few random states:</label>
    <md-select ng-model="vm.selected" aria-label="Random States">
      <md-option ng-repeat="option in vm.options | orderBy: 'name'" ng-value="option.id">{{ option.name }}</md-option>
    </md-select>
    
    <!-- Hidden input holding the value I want to send to the form -->
    <input type="hidden" name="state" ng-value="vm.selected">
    
    <!-- The posting of forms isn't all that great of a thing on a StackOverflow page, so I'll let you just test that on your own. -->
  </form>
</div>

如果您愿意，您可以检查结果以查看隐藏的输入是否包含您想要的内容，并且它还应该使用您希望它具有的不带下划线的 name 发布。