如何从angularjs中的表中向上/向下移动突出显示的选定行?

时间:2016-07-25 22:11:33

标签: javascript angularjs

我是angularjs的新手,我试图通过按钮来上下移动选定的高亮显示行。

例如,在选择第一行后,我需要使用向下按钮将其更改为第二个位置...

我真的需要帮助!



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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:6)

使用一些ng-click指令并向控制器添加适当的处理程序。

&#13;
&#13;
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++;
    }
  }
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

zero298 的avobe答案非常完美。但是只是一个小小的修正

Senario - 如果您单击“上移”或“下移”按钮而不选择一行,则会创建一个空行。

enter image description here

解决方案- 空检查$ 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++;
    }
  }