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>

我想在用户点击按钮时提交所选国家/地区。例如，当用户选择国家/地区并提交时，服务器端$_POST['country']应等于“AU”。但目前$_POST['country']变为字符串“对象”而不是“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中得到$_POST的var_dump时，我得到了，

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

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

Answer 1

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

Answer 2

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

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

例如：

＆＃13;

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'}
    ];
}

＆＃13;

<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>

＆＃13;

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

在Angular Material中提交选择选项值

2 个答案: