AngularJS:获取所选项目
我有一个 ng-repeat 以行显示用户,当用户被点击时,它会打开模态弹出窗口以编辑包含所有用户详细信息的用户.当我为用户选择另一个角色并尝试获取新选择的行以传递给 http put 时,它不会给出新选择的项目文本,而是返回旧文本
I have an ng-repeat that display users in rows, when a user is clicked, it open modal popup for edit User containing all user details. When I select another role for the user and tries to get the newly selected row so as to pass to http put, it does not give the newly selected item text instead it still return the old text
//以表格行显示用户,点击用户名进行编辑
//display users in table rows, click on username to edit
<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 获取所有角色并将其添加到 字段
When the modal popup opens, I get all the roles from API and add it to <select>
field
//获取所有角色并添加到选择字段
//get all roles and add to select field
$http.get('mydomain.com/api/Users/GetAllRole').then(function (response) {
$rootScope.myData = {};
$rootScope.myData = response.data;
});
//这里 ng-model="selectedItem.RoleId"
// Here 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 时<select>
字段中的 .selectedItem.RoleName 它不会给出新的选定项目,而是返回旧的选定项目
Here when I choose another role for the user in the <select>
field and try to get $scope.selectedItem.RoleId it gives the new selected RoleId but when I try to get $scope.selectedItem.RoleName from the <select>
field it doesn't give the new selected item instead it still returns the old 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();
});
};
我认为这是由于给您的 ng-repeat
设置了错误的 ng-model
.这里使用的模型是selectedItem.RoleId
.
I think that this is due to the wrong ng-model
given to your ng-repeat
. The model used here is selectedItem.RoleId
.
Angular
只会更新对象的 RoleId
字段,而不是整个对象.您应该将 ng-model
设置为 selectedItem
.
Angular
will only update the RoleId
field of your object instead of the whole object. You should set the ng-model
to 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,所以我无法检查这是否确实是问题的根源.
Unfortunately, you didn't provide any JSFiddle so I can't check that this is actually the source of the problem.
编辑
要选择旧角色,必须将其设置为API返回的数组的对应入口.
To have the old role selected, you have to set it to the corresponding entrance of the array returned by the API.
我创建了这个 JSFiddle 所以你可以看到如何正确使用 ng-select
指令.
I created this JSFiddle so you can see how to properly use the ng-select
directive.