I have the following code:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--inserindo a meta tag de keywords onde definimos as palavras chaves-->
<meta name="keywords" content="" />
<!--descrição do nosso site-->
<meta name="description" content="Sistema" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--inseri um logo para o meu sistema <!-https://www.iconfinder.com -->
<link href="../Content/images/logo.png" rel="shortcut icon" />
<title>@ViewBag.Title - Sistema</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- adicionado o css do carousel -->
<link href="~/Content/carousel.css" rel="stylesheet">
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script>
angular.module("ListaDados", []);
angular.module("ListaDados").controller("ListaDadosCtrl", function ($scope) {
$scope.app = "Dados que serão inseridos";
//criando um array
$scope.numeros = [
{ nJogo:"", valor:"" }
];
$scope.adicionar = function (numero) {
$scope.numeros.push(angular.copy(numero));
delete $scope.numero;
};
$scope.apagar = function (numeros) {
$scope.numeros = numeros.filter(function (numero) {
if (!numero.selecionado) return numero;
});
};
$scope.isNumeroSelecionado = function (numeros) {
return numeros.some(function(numero){
return numero.selecionado;
});
};
});
</script>
</head>
On page
@{
ViewBag.Title = "Index";
}
@Html.Partial("_navbarInterno")
{{numeros}}
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Número: </th>
<th>Valor: </th>
</tr>
</thead>
<tbody>
<tr ng-class="{'selecionado negrito':numero.selecionado}" ng-repeat=" numero in numeros">
<td><input type="checkbox" ng-model="numero.selecionado" /></td>
<td>{{numero.nJogo}}</td>
<td>{{numero.valor}}</td>
</tr>
</tbody>
</table>
<div class="container droppedHover">
<div class="row">
<div class="span6">
<input class="form-control input-sm " onkeyup="somenteNumeros(this);" placeholder="número" maxlength="4" type="text" ng-model="numero.nJogo" />
<input class="form-control input-sm" placeholder="valor" maxlength="5" type="text" ng-model="numero.valor" />
</div>
</div>
<br/>
<button class="btn btn-primary btn-block " ng-click="adicionar(numero)" ng-disabled="!numero.nJogo || !numero.valor">Adicionar</button>
<button class="btn btn-danger btn-block " ng-click="apagar(numeros)" ng-show="isNumeroSelecionado(numeros)" >Apagar</button>
</div>
<br />
<div class="container droppedHover">
<div class="row">
<div class="span6">
<a href="@Url.Action("Index", "Estracao")" class="btn btn-lg btn-block btn-warning glyphicon glyphicon-hand-left">
<span>Retorno</span>
</a>
</div>
</div>
</div>
Css:
.selecionado{
background-color:yellow;
}
.negrito{
font-weight:bold;
}