javascript - 在 AngularJS 中选择选项返回对象而不是值

Question

我还在学习 AngularJS，所以我不太确定实现这个的最佳方法； 我可以在普通 HTML 中执行此操作，但无法使用“selected”属性，因此我切换到 Angular 元素 - 我刚开始使用它。

我有一个带有下拉框的表单，用户可以在其中选择“用户”或“管理员”。用户的值为“2”，管理员的值为“1”。
默认情况下，“用户”是列表中预先选定的项目。
我的问题是，当表单(通过 AJAX)提交到 PHP 时，表单提交一个像 {value : "2", name : "User"} 这样的对象，我希望它只是提交值，即:“2”。

HTML 代码:

<div class="form-group col-md-6">
    <label for="usrlevel">User Level:</label>
    <select class="form-control form-control-sm"
            data-ng-init="formData.usrlevel = usrlevels[0]"
            data-ng-model="formData.usrlevel"
            data-ng-options="x.name for x in usrlevels">
    </select>
</div>

Javascript代码:

app.controller("admController", function ($scope, $http, $location) {
    $scope.usrlevels = [
      {value : "2", name : "User"},
      {value : "1", name : "Administrator"}
    ];

    $scope.addForm = function() {
        var ans="";
        $http({
            method  : 'POST',
            url     : 'php/addstaff.php',
            data        : $.param($scope.formData),
            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  //set the headers so angular passing info as form data (not request payload)
            }).then(function (response) {
                console.log(response.data);
                ans = response.data;
                if (!ans.success) {
                    // Add Error handling

                } else {
                    $('#addModal').modal('hide');
                    $scope.getStaff();  //refreshes table display
                }
            }).catch(function(response){
                console.log(response.data);
            });
    };

这是调试器的图像，显​​示对于“usrlevel”，表单正在提交一个对象，而它应该只提交所选项目的值。
因此，在调试器中，它应该只显示 usrlevel:"2"

更新: 人们似乎认为 AJAX 调用只应提交用户级别(我认为调试器窗口图像会清楚地表明用户级别是表单中的 1 个元素)，这是实际的 HTML 表单。

<form data-ng-submit="addForm()" name="addform" method="POST">
    <div class="form-group">
        <label for="name">Full Name:</label>
        <input type="text" class="form-control form-control-sm" name="name" data-ng-model="formData.name" id="name" placeholder="">
    </div>
    <div class="form-group">
        <label for="address">Address:</label>
        <input type="text" class="form-control form-control-sm" name="address" data-ng-model="formData.address" id="address" placeholder="">
    </div>
    <div class="form-group">
        <label for="suburb">Suburb:</label>
        <input type="text" class="form-control form-control-sm" name="suburb" data-ng-model="formData.suburb" id="suburb" placeholder="">
    </div>
    <div class="form-group">
        <label for="phone">Phone:</label>
        <input type="tel" class="form-control form-control-sm" name="phone" data-ng-model="formData.phone" id="phone" placeholder="">
        </div>
    <div class="form-row">
    <div class="form-group col-md-6">
        <label for="postcode">Post Code:</label>
        <input type="text" class="form-control form-control-sm" name="postcode" data-ng-model="formData.postcode" id="postcode" placeholder="">
    </div>
    <div class="form-group col-md-6">
        <label for="usrlevel">User Level:</label>
        <select class="form-control form-control-sm" data-ng-init="formData.usrlevel = usrlevels[0]" data-ng-model="formData.usrlevel" data-ng-options="x.name for x in usrlevels"></select>
    </div>
</div>
<div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control form-control-sm" name="email" data-ng-model="formData.email" id="email" placeholder="">
</div>
<div class="form-group">
    <label for="suburb">Password:</label>
    <input type="password" class="form-control form-control-sm" name="password" data-ng-model="formData.password" id="password" placeholder="">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" value="Reset" class="btn btn-secondry">Clear</button>

Answer 1

您问为什么您在选择时获得整个对象，而不仅仅是选择的值。

这是因为您使用了

 data-ng-options="x.name for x in usrlevels"

这会将 X 设置为选择时的模型，如果您只想将 x 的名称/任何其他属性设置为您需要使用的模型

  data-ng-options="x.value as x.name for x in usrlevels" data-ng-model="formData.value"

告诉 Angular 选择 x 将其显示为 y。

使默认选择起作用

现在您需要使用所选用户对象的值更新$score.formData.value。

例如在你的 Controller 中

app.controller("admController", function ($scope, $http, $location) {
    $scope.usrlevels = [
      {value : "2", name : "User"},
      {value : "1", name : "Administrator"}
    ];
    $scope.formData = { value: "1"} // prepare formData and set user with value 1 (Admin) to be selected by default

最后发送整个表单数据。

http({
        method  : 'POST',
        url     : 'php/addstaff.php',
        data        : $scope.formData,
        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  //set the headers so angular passing info as form data (not request payload)
        }).then(function (response) {
            ...etc

再次仅传递您需要的ajax数据，不要传递整个对象!