CODEWITHSUNDEEP
javascriptarraysangularjs
adam
adam

Reputation: 555

ng-repeat hide duplicated item

I have an array of items duplicated on purpose and i want to hide only ONE of these items from my 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="[email protected]" 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>

Upvotes: 0

Views: 75

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

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

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="[email protected]" 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>

Upvotes: 1

Related Questions