One issue I am facing is related to an ng-repeat that displays users in rows. When a user is clicked, it opens a modal popup for editing the user and displays all user details. However, when I select another role for the user and try to retrieve the newly selected row to pass it for http put, it still returns the old text instead of the newly selected item.
// Displaying users in table rows with the ability to edit by clicking on the username
<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>
When the modal popup opens, I fetch all the roles from the API and populate them in a <select> field
// Retrieving all roles and populating them in the select field
$http.get('mydomain.com/api/Users/GetAllRole').then(function (response) {
$rootScope.myData = {};
$rootScope.myData = response.data;
});
// Using 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>
The problem arises when I change the role for the user in the <select> field. While retrieving $scope.selectedItem.RoleId gives the new selected RoleId, trying to get $scope.selectedItem.RoleName does not reflect the new selection and still returns the previously selected item.
$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();
});
};