CODEWITHSUNDEEP
javascriptangularjs
Zhianc
Zhianc

Reputation: 1451

Single selecting an item on a table

So I have a table of items and when I click on a row the row gets selected. I've uploaded a demo here: http://plnkr.co/edit/m0TgTAQqITDIibMz7C4w?p=preview

The question is how do I make me able to select items one at a time and the previous active item get deselected? I also have a problem with the edit and remove menu on how to only show it when an item is selected since they have to be placed outside the controller area.

<nav class="navbar navbar-default" role="navigation">
  <ul ng-show="true" class="nav navbar-nav">
    <li><a href="#">Remove</a></li>
    <li><a href="#">Edit</a></li>
  </ul>
</nav>
<table ng-controller="PersonController" class="table">
 <tr>
   <th>Name</th>
   <th>Age</th>
 </tr>
  <tr ng-repeat="person in people" ng-click="selectPerson(person)" ng-class="{active: person.selected }">
    <td>{{ person.name }}</td>
    <td>{{ person.age }}</td>
  </tr>
</table>

<script>
function PersonController($scope) {
  $scope.people = [
    { name: 'adam', age: 240 },
    { name: 'steve', age: 30 }
  ];

  $scope.selectPerson = function(person) {
    person.selected = true;
  };
}
</script>

Upvotes: 1

Views: 907

Answers (1)

angularijustmether
angularijustmether

Reputation: 326

For your first question about multiple selects, you could cache the last selected item in the scope when selectPerson is called, then deselect it next time selectPerson is called by saying lastPerson.selected = false. Example:

function PersonController($scope) {
  $scope.people = [
    { name: 'adam', age: 240 },
    { name: 'steve', age: 30 }
  ];

  $scope.lastPerson = null;
  $scope.selectPerson = function(person) {
    person.selected = true;
    if($scope.lastPerson) {
      $scope.lastPerson.selected = false;
    }
    $scope.lastPerson = null;
    $scope.lastPerson = person;
  };
}

I would recommend moving the Edit/Remove menu into a Service, then you can access it globally from any controller & alter it's behavior. Example:

<!-- HTML -->
<div ng-controller="MenuCtrl" class="menu-parent">
  <div ng-show="!isCollapsed" class="menu-container">
    <!-- menu goes here -->
  </div>
</div>

// controller
function MenuCtrl($scope, menuService) {
    $scope.isCollapsed = true;

    $scope.menuService = menuService;
    $scope.$watch('menuService.menuCollapsed', function(newVal, oldVal, scope) {
        $scope.isCollapsed = menuService.menuCollapsed;
    });
}

// service
angular.service('menuService', function () {
    return {
      menuCollapsed: false
    };
  });

// example usage in any controller
function RandomCtrl($scope, menuService) {
  $scope.randomEvent = function() {
    menuService.menuCollapsed = true;
  }
}

I would be happy to help you live here, if you'd like: https://www.sudonow.com/session/52699424ea4032693f000071

Upvotes: 2

Related Questions