Angular ng-show, does not remove C # code / Angular / JavaScript

Question

Angular ng-show, does not remove C # code / Angular / JavaScript

Navigation

#1 by (2 votes)

0

I have the following code which lists categories:

<div class="row" ng-show="!TemCategoria">

<div class="container" id="categoria" style="float:right" ng-hide="TemCategoria">
    <select class="btn btn-warning pull-right" onchange="window.location.href=this.value" style=" margin-right: 20px" ng-show="!TemCategoria">
        <option selected ng-show="!TemCategoria">@Model[0].CategoriaAtual.ToString()</option>
        @for (int i = 0; i < Model[0].CategoriaId.Count; i++)
        {
            <option ng-show="!TemCategoria" style="color:#000; background-color:white" value="@Url.Action("Index", "Produto", new {CategoriaId = Model[0].CategoriaId[i], area = "Lojista" })">@Model[0].NomeCategoria[i]</option>
        }
    </select>
</div>

I'm assigning the value to the variable TemCategoria like this:

@{
    var TemCategoria = @Model[0].TemCategoria;
}

I need when there is no category the code simply does not appear and is not interpreted, because I get an error because category is empty.

I tested it when it has category and it hides if I put ng-show="TemCategoria" and it shows if I put ng-show="!TemCategoria" but when there is no category it simply gives the null variable error, it simply ignores ng-show , should I do to resolve this?

Ps :. I put TemCategoria in all to test.

javascript html angularjs c#

asked by anonymous 21.09.2016 / 18:40

1 answer

Best database for Android application [closed] Where to treat data in an MVC project

score 2 · Accepted Answer

To get started, you should understand the concept of ng-show and ng-hide. They will only control the visual display of the element, ie it is the equivalent of using display: none; , however, the html element will still be written to the page.

The best way to avoid this would be to use ng-if . The ng-if will not even render the HTML element if the check is not true.

Another point to note is the way you are using the combinations, they are very complex, using even several times within a single block of code, which in some cases does not even make sense. See the table below to understand how they would work:

ng-show="!TemCategoria" = Will display when not has TemCategoria set
ng-show="TemCategoria" = Will display when there TemCategoria
ng-hide="!TemCategoria" = Will hide when not has TemCategoria set
ng-hide="TemCategoria" = Will hide when there TemCategoria

And with ng-if :

ng-if="TemCategoria" = Will render when there TemCategoria
ng-if="!TemCategoria" = Will render when does not exist TemCategoria

Therefore, you should set ng-if to the initial block only, removing all other statements of ng-show and ng-hide within that block of code.

<div class="row" ng-if="TemCategoria">
    ... restante do código ...
</div>

Getting the final code like this:

<div class="row" ng-if="TemCategoria">
    <div class="container" id="categoria" style="float:right">
        <select class="btn btn-warning pull-right" onchange="window.location.href=this.value" style=" margin-right: 20px">
            <option selected>@Model[0].CategoriaAtual.ToString()</option>
            @for (int i = 0; i < Model[0].CategoriaId.Count; i++)
            {
                <option style="color:#000; background-color:white" value="@Url.Action("Index", "Produto", new {CategoriaId = Model[0].CategoriaId[i], area = "Lojista" })">@Model[0].NomeCategoria[i]</option>
            }
        </select>
    </div>
</div>

In this way, if not we have TemCategoria set, the whole block will not even be rendered in view .