Angularjs - Selected value row

If you don't move the button into the ng-repeat element, there will only be one button for the entire form. Therefore, the user will not be selecting any column or row at the moment they press the button.

One could get around that by changing the prescribed user behavior:

First: the user clicks the row/column as per normal
Second: the user then clicks the button, which shows the alert.

The button would be:

<button id="button" data-row="{{selectedRow}}" onclick="alert('row: ' + document.getElementById('button').getAttribute('data-row'));">click</button>

Here is an implementation that gives you row and column (note this is probably not the preferred angular-way, but it certainly does work and is pure javascript):

index.html

<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"/>
		<script type="application/javascript">
			function alertRowAndColumn(){
				var row = document.getElementById('button').getAttribute('data-row');
				var column = document.getElementById('button').getAttribute('data-column');
				alert("row: " + row + " column:" + column);
			}
		</script>
	</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">
				<td ng-class="{'selected':($index == selectedRow)&&(selectedColumn ==0)}" ng-click="setRowAndColumn({row: $index, column: 0})">{{$index}}</td>
				<td ng-class="{'selected':($index == selectedRow)&&(selectedColumn ==1)}" ng-click="setRowAndColumn({row: $index, column: 1})">{{item.name}}</td>
				<td ng-class="{'selected':($index == selectedRow)&&(selectedColumn ==2)}" ng-click="setRowAndColumn({row: $index, column: 2})">{{item.price}}</td>
				<td ng-class="{'selected':($index == selectedRow)&&(selectedColumn ==3)}" ng-click="setRowAndColumn({row: $index, column: 3})">{{item.quantity}}</td>
			</tr>
		</table>
		<div>
			<button id="button" class="btn btn-default" data-row="{{selectedRow}}" data-column="{{selectedColumn}}" onclick="alertRowAndColumn();">Selected</button>
		</div>
	<script src="js/angular.js"></script>
	<script src="js/foodCtrl.js"></script>
	</body>
</html>

And add this code to the angular js file — in the example is was: ##foodCtl.js

$scope.setRowAndColumn = function(vars) { 
    $scope.selectedRow = vars.row; 
    $scope.selectedColumn = vars.column; 
}

robbiemu/Angularjs - Selected value row.md

index.html