AngularJS:获取选定的项目

时间:2016-03-17 08:27:42

标签: javascript angularjs angularjs-ng-repeat angularjs-http http-put

我有一个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();
    });


  };

1 个答案:

答案 0 :(得分: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指令。