は変更/ limitTo

とNGリピート内の項目の更新amoutを

私は、ng-repeat | limitTo:6を使用してdivを繰り返す（とも私は彼らの5000を持っているとしましょう）しています、と言うことができますは変更/ limitTo

とdivの上で私をクリックすると、 divは削除されます。そして5つのアイテムしか表示されません。

ng-repeatリストのアイテムが削除されると、次のアイテムが表示されるように、どのように編集できますか？

<div class = "col-xs-12"> 
     <!-- selectingUser(user) ; --> 
     <div ng-if="!user.isSelected" data-ng-click = "selectingUser(user)" data-ng-repeat="user in users " > <!-- | filter:$select.search --> 
      <img class="img-circle" data-ng-src ="{{user.image}}" width="8%"/> 
      <span data-ng-bind-html="user.name" ></span> 
     </div> 
    </div>

あなたがここに見るように、div要素がuser.isSelected = false

出典

2017-07-27 Anonymous

を除去するの？ – Nitheesh

要素が配列から削除されると、残りの要素が4つしかありません（limitTo：5を追加する場合）。その後、3、その後2 ... 残念ながら、次の要素は追加されません –

は、あなたが行うことができますあなたがselectingUserのクリックで、それを削除したいと仮定した場合にのみ表示されますが、真の

だけ設定isslected値です -

$scope.selectingUser=function(data){ 
    angular.forEach($scope.users , function(value, key){ 
     if(data.id == value.id) 
     value.isSelected = true; 
    }); 
}

OR深いコピー配列からそれを削除 -

$scope.selectingUser=function(data){ 
angular.forEach($scope.users , function(value, key){ 
    if(data.id == value.id) 
    $scope.users.slice(key); 
}); 
}

出典

2017-07-27 11:00:49

私はすでにその機能を持っています。申し訳ありませんが、私は自分の問題をうまく説明できないと思います。私は6つのオプションを表示するには常にngのリピートが必要です。削除すると7.オプションを追加する必要があります –

あなたはこのようなものを探していますか？

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<body> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 

 
     <div ng-repeat="item in sampleArray | limitTo:5" ng-click="removeItem($index)">{{item}}</div> 
 

 
    </div> 
 

 
    <script> 
 
     var app = angular.module('myApp', []); 
 
     app.controller('myCtrl', function ($scope) { 
 
      $scope.sampleArray = ["Obj1", "Obj2", "Obj3", "Obj4", "Obj5", "Obj6", "Obj7", "Obj8", "Obj9", "Obj10"]; 
 
      $scope.removeItem = function(index){ 
 
       console.log("removing item at" + (index+1)); 
 
       $scope.sampleArray.splice(index, 1); 
 
      } 
 
     }); 
 
    </script> 
 

 
</body> 
 

 
</html>

だけng-repeatとの角度limitToプロパティを使用します。要素が

出典

2017-07-27 11:07:57 Nitheesh

これはまさに私が検索したものです。同じものを追加すると新しいアイテムが読み込まれます –

@AtlasOkyanus動作するコードスニペットを投稿できますか？ – Nitheesh

残念ながら、それは私の仕事のようにはできません。それにはたくさんの依存関係があります.... '

' これは私が試みたものです。 –

を削除された場合には、自動的に機能がプロジェクトに多くの場所で使用されている場合は、ディレクティブが

は、コントローラが

なりましょう例えばこの

を達成するために用いることができるコンテンツを調整します

app.controller('MainCtrl', function($scope) { 
     $scope.data = [{"id":1,"value":"one"},{"id":2,"value":"two"},{"id":3,"value":"three"}, 
     {"id":4,"value":"four"},{"id":5,"value":"five"},{"id":6,"value":"six"}, 
     {"id":7,"value":"seven"},{"id":8,"value":"eight"},{"id":9,"value":"nine"}, 
     {"id":10,"value":"ten"},{"id":11,"value":"eleven"},{"id":12,"value":"twelve"}] 
    });

NG-繰り返し変数を制限し、クリック

上の要素を削除ディレクティブを作成できます

app.directive('dirDemo', function ($filter) { 
     return { 
     scope: { 
      data: '=', 
      limit:'=' 
     }, 
     template: '<div ng-repeat="val in limitedData" ng-click=Remove($index)>{{val.value}}</div>', 
      link: function (scope, element, attrs) { 
       scope.limitedData= $filter('limitTo')(scope.data, scope.limit, 0); 

       scope.Remove=function(index){ 
        scope.GetLimitedArray(index); 
        scope.TrimArray(); 
       } 

       scope.GetLimitedArray=function(index){ 
        scope.data.splice(index,1); 
       } 

       scope.TrimArray=function(){ 
        if(+scope.limit>0){ 
        scope.limitedData= $filter('limitTo')(scope.data, scope.limit, 0); 
       } 
       } 
      } 
      } 
     });

HTML

<body ng-controller="MainCtrl"> 
    <dir-demo data="data" limit="5"></dir-demo> 
    </body>

の作業plunker Click here

出典

2017-07-27 12:35:24 himanshu

包みなさい、あなたの問題は、私は別の何かをしようと、それは私のために働いた、この場合は鉱山のように、

を解決していませんでした。コントローラで

$scope.limiting = 6

要素が配列から削除された後、あなたのために何が起こっている機能$scope.limiting++とあなたの追加機能に$scope.limiting--

出典

2017-07-31 06:20:04

答えて

関連する問題