0

我正在尝试构建一个简单的页面来对记录进行分组，然后添加一个按钮来消除一些记录。

问题是从错误的分组列表中删除了具有相同名称的已消除记录。而且，如果列表没有分组记录，则应该消失，而是始终存在。

小提琴：http: //jsfiddle.net/Tropicalista/qyb6N/15/

// create a deferred object to be resolved later
var teamsDeferred = $q.defer();

// return a promise. The promise says, "I promise that I'll give you your
// data as soon as I have it (which is when I am resolved)".
$scope.teams = teamsDeferred.promise;

// create a list of unique teams
var uniqueTeams = unique($scope.players, 'team');

// resolve the deferred object with the unique teams
// this will trigger an update on the view
teamsDeferred.resolve(uniqueTeams);

// function that takes an array of objects
// and returns an array of unique valued in the object
// array for a given key.
// this really belongs in a service, not the global window scope
function unique(data, key) {
    var result = [];
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];
        if (result.indexOf(value) == -1) {
            result.push(value);
        }
    }
    console.log(result)
    console.log(Math.ceil(result.length / 10))
    $scope.noOfPages = Math.ceil(result.length / 10);
    return result;
}

$scope.currentPage = 1;
$scope.pageSize = 5;
$scope.maxSize = 2;

$scope.deleteItem = function(item){
    //code to delete here
    var index=$scope.players.indexOf(item)
    $scope.players.splice(index,1);
};
4

4 回答 4

2

这是 SpykeBytes 在提示上扩展的示例

      <div ng-repeat="location in journey.locations">
                <div id="location_div_{{ $index }}">
                    <label class="journey-label">Location name</label>
                    <input class="journey-input" id="location_{{ $index }}" type="text" ng-model="location.location_name" />
                    <button ng-show="editable" tabindex="-1" class="journey-button remove" ng-click="removeItem(journey.locations, $index)">
                        Remove location
                    </button>

然后在我的控制器中，我设置了一个删除单个项目的操作

$scope.removeItem = function(itemArray, index) {
  return itemArray.splice(index, 1);
};
于 2013-09-13T13:49:30.047 回答
1

要在没有列出任何内容的情况下隐藏组，您需要获取过滤后的列表，然后用于ng-show驱动显示。这有点棘手：

<div ng-show="currentList.length>0" ng-repeat="team in teams| startFrom:(currentPage - 1)*pageSize  | limitTo:pageSize | filter:searchInput"> <b>{{team}}</b>
    <li ng-repeat="player in (currentList = (players | filter: {team: team}))">{{player.name}}
        <button class="btn btn-small" type="button" ng-click="deleteItem(player)">Delete</button>
    </li>
</div>

但是，我没有看到您所说的有关从错误组中删除的问题。你能告诉我如何重现它吗？

于 2013-09-13T13:56:28.663 回答
1

Index 在这里对您没有帮助，因为 ng-repeat 提供的 {{$index}} 在分组中。也就是说，每个分组都会重新启动 $index 变量。不过，您将需要为每条记录提供唯一标识符。没有它，就无法确定您要删除的记录是正确的。

至于分组，您可以在删除某些内容时重新创建模型。这不适用于 Fiddle 中的示例数据，但它在您处理真实数据源时有效。

于 2013-09-13T13:57:18.393 回答
0

如果它在 ng-repeat 内，您可以改为传递对象的索引。

于 2013-09-13T13:31:29.170 回答