Does not show the 1 row of the empty array using angularJS asp.net mvc?

2

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;
}
    
asked by anonymous 30.12.2015 / 03:07

2 answers

0

This is because you created the array and already created an empty element, see:

$scope.numeros = [
    { nJogo:"", valor:"" }
];

The correct thing would be to do this:

$scope.numeros = [];

So, when you need to insert an object, the array will already exist (blank) and the new object will be added and the value that the user entered.

See if it solves your problem.

    
30.12.2015 / 14:55
1

By initializing the array variable, you do not need to enter the attributes.

Only [] already resolves.

In your example, you put empty strings in the first position. So the first line of the table "looks" to be empty.

    
30.12.2015 / 16:55