我是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;
答案 0 :(得分:6)
使用一些ng-click
指令并向控制器添加适当的处理程序。
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;
答案 1 :(得分:0)
zero298 的avobe答案非常完美。但是只是一个小小的修正
Senario - 如果您单击“上移”或“下移”按钮而不选择一行,则会创建一个空行。
解决方案- 空检查$ 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++;
}
}