Question

我有一个要在表中显示的值数组。当我不订购它们时，我的删除代码将按预期工作。我想对ng-repeat中的值进行排序，以按角色名称对数据进行分组，但这使我的splice函数删除了错误的值。删除我选择的值的正确方法是什么？

有效的HTML

<tbody data-ng-repeat="oneUserRole in ui.userRoleResultsList track by $index">
    <tr>
      <td>{{oneUserRole.UserId}}</td>
      <td>{{oneUserRole.RoleName}}</td>
      <td>{{oneUserRole.Details}}</td>
      <td class="text-center">
         <button type="button" class="btn btn-sm btn-danger" title="Delete" data-ng-click="ui.removeUserRole($index)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
      <td>
    </tr>
<tbody>

无法使用的HTML（根据需要排序，但由于索引问题而无法删除）：

<tbody data-ng-repeat="oneUserRole in ui.userRoleResultsList | orderBy: 'RoleName' track by $index">
    <tr>
      <td>{{oneUserRole.UserId}}</td>
      <td>{{oneUserRole.RoleName}}</td>
      <td>{{oneUserRole.Details}}</td>
      <td class="text-center">
         <button type="button" class="btn btn-sm btn-danger" title="Delete" data-ng-click="ui.removeUserRole($index)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
      <td>
    </tr>
<tbody>

JavaScript：

$scope.ui.removeUserRole = function (index) {
   // remove row from array.
   $scope.ui.userRoleResultsList.splice(index, 1);
  // other code to remove selected item from db omitted here.
}

Answer 1

如果您要更改

<button type="button" class="btn btn-sm btn-danger" title="Delete" data-ng-click="ui.removeUserRole($index)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>

到

<button type="button" class="btn btn-sm btn-danger" title="Delete" data-ng-click="ui.removeUserRole({oneUserRole.UserId)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>

然后像这样对它进行过滤：

$scope.ui.removeUserRole = function (userId) {    
for(let i = $scope.ui.userRoleResultsList.length; i > 0; i--) {
    if(userId == $scope.ui.userRoleResultsList[i]) {
        $scope.ui.userRoleResultsList.splice(i, 1);  
        break;   
    }
}

}

我认为应该可以使用

Answer 2

我最终尝试了Jelle和Frank Modica的建议。感谢你们每个人的快速响应。最有效的方法是预过滤来自控制器的列表，而不是更改html。

这是我的控制器函数，它将数据放入$ scope.ui.userRoleResultsList：

    // ******************************************************************
    // Get the existing active User Roles 
    // ******************************************************************
    function LoadUserRoleResultsList() {
        var errorSummary = 'Error retrieving UserRoles list';
        $scope.ui.userRoleResultsList = [];
        $scope.promise =
            $http.get(appConfig.GetRootUrl() + '/AdminUserRoles/UserRoleList')
                .then(function onSuccess(response) {

                    var result = apiResponseParser.Parse(response);
                    if (result.isSuccessful && result.data !== null) {
                        // presort by rolename.
                        $scope.ui.ddlUserRoleTypes = result.data;
                        $scope.ui.userRoleResultsList = $filter('orderBy')($scope.ui.ddlUserRoleTypes, 'RoleName');
                    }
                    else {
                        ReportErrorMessage(errorSummary, result.message); 
                    }
                })
            .catch(function onError(response) {
                console.log(response, " = caught response Error");
                    ReportHttpError(errorSummary, response);
                });
    }

魔术是在//通过角色名注释进行预排序之后的两行。

ng-repeat中的Angularjs orderBy影响索引。如何从数组中删除正确的元素？

2 个答案: