AngularJS: 获取选中的Item

Question

我有一个按行显示用户的 ng-repeat，当单击用户时，它会打开模式弹出窗口以编辑包含所有用户详细信息的用户。当我 select 用户的另一个角色并尝试获取新的 selected 行以传递给 http put 时，它不会提供新的 selected 项目文本而是它仍然return旧文

//在table行显示用户，点击用户名进行编辑

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

//获取所有角色并添加到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 时，它会给出新的 selected RoleId 但是当我尝试获取 $ scope.selectedItem.RoleName 从 <select> 字段中它没有给出新的 selected 项目而是它仍然 returns 旧的 selected 项目

$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();
    });


  };

Answer 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 指令。

AngularJS: 获取选中的Item

AngularJS: Get selected Item

javascript

http-put

angularjs

angularjs-ng-repeat

angularjs-http