ng-repeat隐藏重复的项目

Question

I have an array of items duplicated on purpose and i want to hide only ONE of these items from my ng-repeat. 我有一组故意重复的项目，我只想从ng-repeat中隐藏这些项目之一。

How can I hide only one of the duplicated items on click ? 如何在单击时仅隐藏重复项之一？

I am probably missing something but I am struggling to find it. 我可能会丢失一些东西，但我一直在努力寻找它。

Plunker example 柱塞示例

 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

Actually your Logic is correct, the problem lies in this line, 实际上您的逻辑是正确的，问题出在这一行，

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

when you do this same reference is being copied to the users, so when you hide, two elements are getting hidden. 当您执行此操作时，会将相同的引用复制到用户，因此在隐藏时，两个元素将被隐藏。

DEMO 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