CODEWITHSUNDEEP
javascriptangularjs
Alvaro Enrique
Alvaro Enrique

Reputation: 39

How do I move up/down a highlight selected row from a table in angularjs?

I'm new in angularjs, I'm trying to do a table to move up/down the selected highlight row with buttons..

for example, after select the first row I need to change it to the second position with a down button...

I really need help!

var foodApp = angular.module('foodApp',[]);

foodApp.controller('foodCtrl',function($scope){
	$scope.selectedRow = null;
	$scope.foodItems = [{
		name:'Noodles',
		price:'10',
		quantity:'1'
	},
	{
		name:'Pasta',
		price:'20',
		quantity:'2'
	},
	{
		name:'Pizza',
		price:'30',
		quantity:'1'
	},
	{
		name:'Chicken tikka',
		price:'100',
		quantity:'1'
	}];
	$scope.setClickedRow = function(index){
		$scope.selectedRow = index;
	}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
.selected {
	background-color:black;
	color:white;
	font-weight:bold;
}
</style>
<html>
	<head>
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
		<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/> 
	</head>
	<body ng-app="foodApp" ng-controller="foodCtrl">
		<table class="table table-bordered" >
			<tr>
				<th>#</th>
				<th>Name</th>
				<th>Price</th>
				<th>Quantity</th>
			</tr>
			<tr ng-repeat="item in foodItems" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
				<td>{{$index}}</td>
				<td>{{item.name}}</td>
				<td>{{item.price}}</td>
				<td>{{item.quantity}}</td>
			</tr>
		</table>
		<div>
			selectedRow = {{selectedRow}}
		</div>
	<script src="js/angular.js"></script>
	<script src="js/foodCtrl.js"></script>
	</body>
</html>

Upvotes: 2

Views: 7223

Answers (2)

Tirtha
Tirtha

Reputation: 89

The avobe answer of zero298 works perfect. But just a small correction

Senario - If you click on the Move Up or Move Down button without selecting a row then it creates a empty row.

enter image description here

Solution - NULL check for $scope.selectedRow

    $scope.moveUp = function(num) {
    if (num > 0 && $scope.selectedRow != null) {
      tmp = $scope.foodItems[num - 1];
      $scope.foodItems[num - 1] = $scope.foodItems[num];
      $scope.foodItems[num] = tmp;
      $scope.selectedRow--;
    }
  }
  $scope.moveDown = function(num) {
    if (num < $scope.foodItems.length - 1 && $scope.selectedRow != null) {
      tmp = $scope.foodItems[num + 1];
      $scope.foodItems[num + 1] = $scope.foodItems[num];
      $scope.foodItems[num] = tmp;
      $scope.selectedRow++;
    }
  }

Upvotes: 1

zero298
zero298

Reputation: 26878

Use some ng-click directives and add appropriate handlers to your controller.

var foodApp = angular.module('foodApp', []);

foodApp.controller('foodCtrl', function($scope) {
  $scope.selectedRow = null;
  $scope.foodItems = [{
    name: 'Noodles',
    price: '10',
    quantity: '1'
  }, {
    name: 'Pasta',
    price: '20',
    quantity: '2'
  }, {
    name: 'Pizza',
    price: '30',
    quantity: '1'
  }, {
    name: 'Chicken tikka',
    price: '100',
    quantity: '1'
  }];
  $scope.setClickedRow = function(index) {
    $scope.selectedRow = index;
  }
  $scope.moveUp = function(num) {
    if (num > 0) {
      tmp = $scope.foodItems[num - 1];
      $scope.foodItems[num - 1] = $scope.foodItems[num];
      $scope.foodItems[num] = tmp;
      $scope.selectedRow--;
    }
  }
  $scope.moveDown = function(num) {
    if (num < $scope.foodItems.length - 1) {
      tmp = $scope.foodItems[num + 1];
      $scope.foodItems[num + 1] = $scope.foodItems[num];
      $scope.foodItems[num] = tmp;
      $scope.selectedRow++;
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
  .selected {
    background-color: black;
    color: white;
    font-weight: bold;
  }
</style>
<html>

<head>
  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
  <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen" />
</head>

<body ng-app="foodApp" ng-controller="foodCtrl">
  <table class="table table-bordered" ng-keydown="key($event)">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
    <tr ng-repeat="item in foodItems" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
      <td>{{$index}}</td>
      <td>{{item.name}}</td>
      <td>{{item.price}}</td>
      <td>{{item.quantity}}</td>
    </tr>
  </table>
  <button type="button" ng-click="moveUp(selectedRow)">Move Up</button>
  <button type="button" ng-click="moveDown(selectedRow)">Move Down</button>
  <div>
    selectedRow = {{selectedRow}}
  </div>
</body>

</html>

Upvotes: 8

Related Questions