Do not show 1 row of empty array using Angularjs Asp.net mvc?

Asked

Viewed 261 times

2

I have the following code:

inserir a descrição da imagem aqui

<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 the 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;
}
asp.net-mvc angularjs array

  • Where are the 'add' function data coming from? Are they arriving correctly? If you haven’t checked, apply a log to the property numero and see how the data.

  • @Celsomtrindade, I changed the code of the question, I added all the content in a way that makes it easier to understand, is returning me [{"nJogo":"","value":""}] once you open the screen, I thank you if you can help.

  • Yes, I could understand. But I still have some doubts. The values to be placed in that array, that is nJogo and valor Where should they come from? From a database? Or will it be manually populated? For now you are just creating the empty array and only if the user interacts with the form will there be the filling.

  • @Celsomtrindade, correct, the values come from user interaction manually, the problem is that comes to 1 line of the database array, without having an interaction, I wanted empty, I will try to post an image to make it easier to understand,

  • @Celsomtrindade, I added an image, see if it’s easier

2 answers

1

Ai initialize array variable, no need to enter attributes.

Only [] already solves.

In your example you placed empty strings in the first position. So the first row of the table "seems" to be empty.

0


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

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

It would be right to do it this way:

$scope.numeros = [];

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

See if it solves your problem.

  • Your answer was perfect, thank you for your help in my studies!

Browser other questions tagged asp.net-mvc angularjs array

You are not signed in. Login or sign up in order to post.