AngularJS:获取选定的项 [英] AngularJS: Get selected Item

问题描述

我有一个ng-repeat，可以按行显示用户，当单击用户时，它将打开模式弹出窗口，以编辑包含所有用户详细信息的User.当我为用户选择另一个角色并尝试获取新选择的行以传递到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获取所有角色并将其添加到< select> 字段

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

这篇关于AngularJS:获取选定的项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！