Выберите вариант в 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"

UPDATE: Поскольку люди, кажется, находятся под впечатлением, что вызов 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

Как уже упоминалось, была проблема с ng-options, поэтому он возвращал объект, а не только значение.

Но затем, после изменения ng-options он больше не имел «Пользователь» в качестве выбранного по умолчанию элемента в раскрывающемся списке - и тогда это была проблема с ng-init.

Старый HTML

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

Новый HTML

<select class="form-control form-control-sm" 
   data-ng-model="formData.usrlevel" 
   data-ng-init="formData.usrlevel = formData.usrlevel || usrlevels[0].value"
   data-ng-options="x.value as x.name for x in usrlevels">
</select>

Answer 2

Вы спрашиваете, почему вы выбираете весь объект, а не только выбранное значение.

Это потому, что вы использовали

 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"

Как говорят угловые выберите х показать как у.

, чтобы сделать выбор по умолчанию работающим

теперь вам нужно обновить $score.formData.value значением выбранного объекта пользователя.

так, например, в вашем контроллере

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, не передавайте весь объект!

Answer 3

Используйте предложение as в ng-options:

<div class="form-group col-md-6">
    <label for="usrlevel">User Level:</label>
    <select class="form-control form-control-sm"
            ̶d̶a̶t̶a̶-̶n̶g̶-̶i̶n̶i̶t̶=̶"̶f̶o̶r̶m̶D̶a̶t̶a̶.̶u̶s̶r̶l̶e̶v̶e̶l̶ ̶=̶ ̶u̶s̶r̶l̶e̶v̶e̶l̶s̶[̶0̶]̶"̶
            data-ng-model="formData.usrlevel"
            ̶d̶a̶t̶a̶-̶n̶g̶-̶o̶p̶t̶i̶o̶n̶s̶=̶"̶x̶.̶n̶a̶m̶e̶ ̶f̶o̶r̶ ̶x̶ ̶i̶n̶ ̶u̶s̶r̶l̶e̶v̶e̶l̶s̶"̶>̶
            data-ng-options="x.value as x.name for x in usrlevels">
    </select>
</div>

Также начальное значение ng-model должно быть установлено на примитив вместо объекта:

$scope.formData.usrlevel = $scope.usrlevels[0].value;

---

Лучше POST-данные как application/json, но если ваш бэкэнд поддерживает только application/x-www-form-urlencoded, используйте встроенный сериализатор параметров AngularJS:

$scope.addForm = function() {
    var ans="";
    $http({
        method  : 'POST',
        url     : 'php/addstaff.php',
        ̶d̶a̶t̶a̶ ̶ ̶ ̶ ̶:̶ ̶$̶.̶p̶a̶r̶a̶m̶(̶$̶s̶c̶o̶p̶e̶.̶f̶o̶r̶m̶D̶a̶t̶a̶)̶,̶
        data    : $scope.formData,
        transformRequest: $httpParamSerializerJQLike,
        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  //set the headers so angular passing info as form data (not request payload)
    })

Answer 4

Проблема с вашей моделью. Ну, простой для понимания синтаксис будет выглядеть так

angular.module("app",[]).controller('ctrl', function($scope){

 $scope.users= [{value : "2", name : "User"},{value : "1", name : "Admin"}]
 $scope.user = "2";
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" >
<select ng-model="user">
  <option ng-repeat="i in users" value="{{i.value}}">{{i.name}}</option>
</select>
Value is : {{user}}
</div>

И теперь вы можете использовать $scope.user в качестве выбранного значения для отправки в любое место.

Чтобы отправить его в качестве полезной нагрузки на ваш запрос, вы можете использовать что-то вроде

..
data : {"userLevel" :$scope.user },
..