ng-repeat隱藏重復的項目

Question

我有一組故意重復的項目，我只想從ng-repeat中隱藏這些項目之一。

如何在單擊時僅隱藏重復項之一？

我可能會丟失一些東西，但我一直在努力尋找它。

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { var users = [{name: 'toto', hide:false},{name: 'titi', hide:false},{name: 'tutu', hide:false},{name: 'tata', hide:false}]; $scope.doubledUsers = [].concat(users, users); $scope.hideUser = function(user){ user.hide = true; } });

 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <div ng-repeat="user in doubledUsers | orderBy: 'name' track by $index"> <p ng-hide="user.hide" ng-click="hideUser(user)">Hello {{user.name}}! - id={{$index+1}}</p> </div> </body> </html>

Answer 1

實際上您的邏輯是正確的，問題出在這一行，

$scope.doubledUsers = [].concat(users, users);

當您執行此操作時，會將相同的引用復制到用戶，因此在隱藏時，兩個元素將被隱藏。

DEMO

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.users = [{name: 'toto', hide:false},{name: 'titi', hide:false},{name: 'tutu', hide:false},{name: 'tata', hide:false}]; // $scope.doubledUsers = [].concat(users, users); $scope.hideUser = function(user){ user.hide = true; } });

 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <div ng-repeat="user in users | orderBy: 'name' track by $index"> <p ng-hide="user.hide" ng-click="hideUser(user)">Hello {{user.name}}! - id={{$index+1}}</p> </div> </body> </html>

ng-repeat隱藏重復的項目

問題描述

1 個解決方案

解決方案1
1 2017-11-12 14:25:48

ng-repeat隱藏重復的項目

問題描述

1 個解決方案

解決方案1 1 2017-11-12 14:25:48

解決方案1
1 2017-11-12 14:25:48