Question

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

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

小提琴：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);
};

Answer 1

以下是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);
};

Answer 2

要在未列出任何内容时隐藏组，您需要获取已过滤的列表，然后使用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>

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

Answer 3

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

就分组而言，您可以在删除某些内容时重新创建模型。这不适用于Fiddle中的示例数据，但是当您处理真实数据源时，它可以正常工作。

Answer 4

如果对象的索引在ng-repeat内，则可以传递该对象的索引。

AngularJs删除嵌套分组行上的记录

4 个答案: