AngularJS: получить выбранный элемент

У меня есть ng-repeat, который отображает пользователей в строках, когда пользователь нажимается, он открывает модальное всплывающее окно для редактирования пользователя, содержащее все данные о пользователе. Когда я выбираю другую роль для пользователя и пытаюсь получить вновь выбранную строку, чтобы перейти к http put, она не дает текст вновь выбранного элемента, а по-прежнему возвращает старый текст

// отображаем пользователей в строках таблицы, кликаем по имени пользователя для редактирования

    <tr ng-repeat="item in usersData | filter: searchBox">

        <td><a ng-click="openEditUser($index)">{{item.UserName}}</a></td>
        <td>{{item.EMail}}</td>
        <td>{{item.RoleName}}</td>
        <td style="text-align: right;">{{item.IsActive ? 'Yes' : 'No'}}</td>

 </tr>

Когда открывается модальное всплывающее окно, я получаю все роли из API и добавляю их в поле <select>

//получаем все роли и добавляем в поле выбора

$http.get('mydomain.com/api/Users/GetAllRole').then(function (response) {
            $rootScope.myData = {};
            $rootScope.myData = response.data;
        });

// Здесь ng-model="selectedItem.RoleId"

<select ng-required="true" ng-model="selectedItem.RoleId" class="form-control"
                ng-options="item._id as item.RoleName for item in myData">
            <option value="">Select</option>                                


</select>

Здесь, когда я выбираю другую роль для пользователя в поле <select> и пытаюсь получить $scope.selectedItem.RoleId, он дает новый выбранный RoleId, но когда я пытаюсь получить $scope.selectedItem.RoleName из поля <select>, он не дает новый выбранный элемент вместо этого по-прежнему возвращает старый выбранный элемент

$scope.EditUser = function(){

    $http.put("domain.com/api/Users/UpdateUser", {
       _id: $scope.selectedItem._id,'RoleId': $scope.selectedItem.RoleId, 'EMail': $scope.selectedItem.EMail, RoleName : $scope.selectedItem.RoleName, IsActive: $scope.selectedItem.IsActive

    }).then(function (response) {
        $route.reload();
        $scope.ok();
        $scope.simpleSuccess();
    }, function (error) {
        $scope.ok();
        $scope.simpleError();
    });


  };

person user3055606    schedule 17.03.2016    source источник


Ответы (1)


Я думаю, что это связано с неправильным ng-modelданным вашему ng-repeat. Здесь используется модель selectedItem.RoleId.

Angular будет обновлять только поле RoleId вашего объекта, а не весь объект. Вы должны установить ng-model на selectedItem.

<select ng-required="true" ng-model="selectedItem" class="form-control" ng-options="item._id as item.RoleName for item in myData">
    <option value="">Select</option>                                
</select>

К сожалению, вы не предоставили JSFiddle, поэтому я не могу проверить, действительно ли это является источником проблемы.

ИЗМЕНИТЬ

Чтобы выбрать старую роль, вы должны установить ее на соответствующий вход массива, возвращаемого API.

Я создал этот JSFiddle, чтобы вы могли увидеть, как правильно использовать директиву ng-select.

person Erazihel    schedule 17.03.2016
comment
Я хочу, чтобы старая выбранная роль автоматически выбиралась в поле «выбрать», когда я нажимаю на пользователя для редактирования, чтобы затем выбрать другую роль для пользователя. Если я использую ng-model=selectedItem, хотя он работает, но он не выбирает автоматически старую роль в поле «выбрать» - person user3055606; 17.03.2016
comment
@user3055606 user3055606 посмотрите мое редактирование, которое покажет вам, как использовать ng-select - person Erazihel; 17.03.2016
comment
Вы имеете в виду, что мне придется передать выбранный индекс в $scope.selectedItem = $scope.myData[0]; - person user3055606; 17.03.2016
comment
Я предполагаю, что старое выбранное значение пришло из вашего API, поэтому вам придется восстановить индекс, соответствующий этому старому выбранному значению, и сделать что-то вроде $scope.selectedItem = $scope.myData[index of old value] - person Erazihel; 17.03.2016