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

Question

I have the following code listing 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 variable TemCategoria thus:

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

I need that 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 in case I put ng-show="TemCategoria" and shows if I put ng-show="!TemCategoria" but when there is no category it simply gives the null variable error, it simply ignores the ng-show, someone knows what I must do to fix this?

Ps:. I put the TemCategoria in all to test.

Answer 1

To begin with, you must understand the concept of ng-show and ng-Hide. They will only control the visual display of the element, ie, is the equivalent to use display: none;, however, the html element will still be written on the page.

The best way to avoid this would be by using 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 the same 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" = Vai flaunt when nay have TemCategoria definite
• ng-show="TemCategoria" = Vai flaunt when have TemCategoria
• ng-hide="!TemCategoria" = Vai hide when nay have TemCategoria definite
• ng-hide="TemCategoria" = Vai hide when have TemCategoria

And with ng-if:

• ng-if="TemCategoria" = Vai render when have TemCategoria
• ng-if="!TemCategoria" = Vai render when there is no TemCategoria

Therefore, you should define the ng-if only in the initial block, removing all other statements from ng-show and ng-hide inside that code pad.

<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>

Thus, case nay we have TemCategoria defined, the entire block will not even be rendered in the view.