72

$scope.itemsビューでアイテムが削除されるように、配列から要素を削除しようとしていますng-repeat="item in items"

デモ目的で、ここにいくつかのコードを示します。

for(i=0;i<$scope.items.length;i++){
    if($scope.items[i].name == 'ted'){
      $scope.items.shift();
    }
}

ted という名前がある場合、ビューから最初の要素を削除したいですか? 正常に動作しますが、ビューはすべての要素をリロードします。すべての配列キーがシフトしたためです。これは、私が作成しているモバイルアプリで不要な遅延を引き起こしています..

誰でもこの問題の解決策を持っていますか?

4

12 に答える 12

16

プレーンな JavaScript を使用できます - Array.prototype.filter()

$scope.items = $scope.items.filter(function(item) {
    return item.name !== 'ted';
});
于 2014-02-23T18:42:44.163 に答える
11

配列に対して行うshift()と、配列の長さが変わるためです。そのため、for ループが台無しになります。この問題を回避するために、端から端までループすることができます。

ところで、配列の最初の要素ではなく、位置iの要素を削除しようとしていると仮定します。($scope.items.shift();コードでは、配列の最初の要素が削除されます)

for(var i = $scope.items.length - 1; i >= 0; i--){
    if($scope.items[i].name == 'ted'){
        $scope.items.splice(i,1);
    }
}
于 2013-08-18T20:26:39.953 に答える
8

「ted」という名前のアイテムを削除filterし ますUnderscore library

$scope.items = _.filter($scope.items, function(item) {
    return !(item.name == 'ted');
 });
于 2013-08-18T20:39:27.353 に答える
6

「角度のある」ソリューションを少し拡張しただけです。数値 ID に基づいてアイテムを除外したかったので、! アプローチは機能しません。{ name: 'ted' } または { id: 42 } に対して機能する、より一般的な解決策は次のとおりです。

mycollection = $filter('filter')(myCollection, { id: theId }, function (obj, test) { 
                                                             return obj !== test; });
于 2014-05-22T15:33:01.410 に答える
5

@madhead が提供するソリューションが気に入りました

ただし、私が抱えていた問題は、ソートされたリストでは機能しないことです。そのため、削除関数にインデックスを渡す代わりに、アイテムを渡し、indexof を介してインデックスを取得しました。

例えば：

var index = $scope.items.indexOf(item);
$scope.items.splice(index, 1);

madheads の例の更新版を以下に示します: 例へのリンク

HTML

<!DOCTYPE html>
<html data-ng-app="demo">
  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <div data-ng-controller="DemoController">
      <ul>
        <li data-ng-repeat="item in items|orderBy:'toString()'">
          {{item}}
          <button data-ng-click="removeItem(item)">Remove</button>
        </li>
      </ul>
      <input data-ng-model="newItem"><button data-ng-click="addItem(newItem)">Add</button>
    </div>
  </body>
</html>

JavaScript

"use strict";

var demo = angular.module("demo", []);

function DemoController($scope){
  $scope.items = [
    "potatoes",
    "tomatoes",
    "flour",
    "sugar",
    "salt"
  ];

  $scope.addItem = function(item){
    $scope.items.push(item);
    $scope.newItem = null;
  }

  $scope.removeItem = function(item){
    var index = $scope.items.indexOf(item);
    $scope.items.splice(index, 1);
  }
}
于 2016-11-05T01:41:19.323 に答える
1

私の解決策は非常に簡単でした

app.controller('TaskController', function($scope) {
 $scope.items = tasks;

    $scope.addTask = function(task) {
        task.created = Date.now();
        $scope.items.push(task);
        console.log($scope.items);
    };

    $scope.removeItem = function(item) {
        // item is the index value which is obtained using $index in ng-repeat
        $scope.items.splice(item, 1);
    }
});
于 2016-03-23T06:13:49.217 に答える
1

indexOf 関数を使用しても、REST リソースのコレクションでは効果がありませんでした。

リソースのコレクションにあるリソースの配列インデックスを取得する関数を作成する必要がありました。

factory.getResourceIndex = function(resources, resource) {
  var index = -1;
  for (var i = 0; i < resources.length; i++) {
    if (resources[i].id == resource.id) {
      index = i;
    }
  }
  return index;
}

$scope.unassignedTeams.splice(CommonService.getResourceIndex($scope.unassignedTeams, data), 1);
于 2014-09-17T07:43:35.327 に答える