如何從angularjs中的表中向上/向下移動高亮選定行？

我是新的angularjs，我試圖做一個表來向上/向下移動選定的高亮行與按鈕..如何從angularjs中的表中向上/向下移動高亮選定行？

例如，選擇第一行後，我需要將其更改爲第二一個向下的按鈕位置...

我真的需要幫助！

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

 
foodApp.controller('foodCtrl',function($scope){ 
 
\t $scope.selectedRow = null; 
 
\t $scope.foodItems = [{ 
 
\t \t name:'Noodles', 
 
\t \t price:'10', 
 
\t \t quantity:'1' 
 
\t }, 
 
\t { 
 
\t \t name:'Pasta', 
 
\t \t price:'20', 
 
\t \t quantity:'2' 
 
\t }, 
 
\t { 
 
\t \t name:'Pizza', 
 
\t \t price:'30', 
 
\t \t quantity:'1' 
 
\t }, 
 
\t { 
 
\t \t name:'Chicken tikka', 
 
\t \t price:'100', 
 
\t \t quantity:'1' 
 
\t }]; 
 
\t $scope.setClickedRow = function(index){ 
 
\t \t $scope.selectedRow = index; 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<style> 
 
.selected { 
 
\t background-color:black; 
 
\t color:white; 
 
\t font-weight:bold; 
 
} 
 
</style> 
 
<html> 
 
\t <head> 
 
\t \t <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" /> 
 
\t \t <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/> 
 
\t </head> 
 
\t <body ng-app="foodApp" ng-controller="foodCtrl"> 
 
\t \t <table class="table table-bordered" > 
 
\t \t \t <tr> 
 
\t \t \t \t <th>#</th> 
 
\t \t \t \t <th>Name</th> 
 
\t \t \t \t <th>Price</th> 
 
\t \t \t \t <th>Quantity</th> 
 
\t \t \t </tr> 
 
\t \t \t <tr ng-repeat="item in foodItems" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)"> 
 
\t \t \t \t <td>{{$index}}</td> 
 
\t \t \t \t <td>{{item.name}}</td> 
 
\t \t \t \t <td>{{item.price}}</td> 
 
\t \t \t \t <td>{{item.quantity}}</td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t \t <div> 
 
\t \t \t selectedRow = {{selectedRow}} 
 
\t \t </div> 
 
\t <script src="js/angular.js"></script> 
 
\t <script src="js/foodCtrl.js"></script> 
 
\t </body> 
 
</html>

來源

2016-07-25 Alvaro Enrique

哪裏是你的按鈕？你的意思是方向鍵？ – zero298

對不起，我忘記了編碼，我的意思是 –

使用一些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++; 
 
    } 
 
    } 
 
});

<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>

來源

2016-07-25 22:53:00 zero298

非常感謝先生！這真的幫助了我。 –

@AlvaroEnrique很高興爲您提供幫助。如果這解決了您的問題，請務必將其標記爲接受的答案。 – zero298

如何從angularjs中的表中向上/向下移動高亮選定行？

回答

相關問題