Hide <li> element if a scope value is null

Question

I want to hide certain items in my list depending on whether a scope value is null.

This is my controller:

angular.module("umbraco").controller("my.custom.grideditorcontroller", function ($scope) {
    $scope.control.heading;

    $scope.control.punkt1 = null;
    $scope.control.punkt2 = null;
    $scope.control.punkt3 = null;
    $scope.control.punkt4 = null;
    $scope.control.punkt5 = null;
});

I have 5 li elements as well, that I want to show/hide depending on whether each of these scope properties has

This is one of my li elements:

<li ng-hide="control.punkt5 == null">@Model.punkt5</li>

This doesn't work, as the element is still being shown.

My properties use 2-way binding with my input elements:

<input type="text" ng-model="control.punkt1" placeholder="Indtast første punkt...">

But the input and the li elements are located in 2 separate HTML documents, since I am creating a grid editor for Umbraco.

This is my folder structure: https://i.imgur.com/ZbejcOl.png

Where the infobox.cshtml file contains the li elements, and the infobox.html file contains the input elements.

I tried using razoe code in my ng-hide/show condition, but that didn't return any boolean values. What is the correct way to approach this without using razor?

My render view (infobox.cshtml) receives a dynamic model of type JObject, but I can't use any of its methods in my ng-hide condition as it is c#. I've tried everything as mentioned in my previous post.

Edit:

<div ng-controller="my.custom.grideditorcontroller">
    <div class="list-group">
        <div class="list-group-item">
            <h4 class="list-group-item-heading">@Model.heading</h4>
            <ul class="ul-with-bullets">
                <li ng-show="IsProperty(@Model,'punkt1')">@Model.punkt1</li>
                <li ng-show="@Model.GetType().GetProperty("punkt2") != null">@Model.punkt2</li>
                <li ng-show="@Model.GetType().GetProperty("punkt3") != null">@Model.punkt3</li>
                <li ng-show="@Model.GetType().GetProperty("punkt4") != null">@Model.punkt4</li>
                <li ng-hide="control.punkt5">@Model.punkt5</li>
            </ul>
        </div>
    </div>
</div>

Can you try using ng-if instead ng-hide for eg: ng-if="control.punkt5"? — Immanuel Kirubaharan
That did not remove the li element. This is what is returned in the HTML: <li ng-if="control.punkt5 == null"></li> — Leth
Yes, I have included my full code in the infobox.cshtml as en edit. — Leth
I've tried quite a few different options as you can see. @Model refers to the dynamic object that is passed, which contains all properties that has a value assigned to them. — Leth

Ramin Farajpour Ramin Farajpour · Accepted Answer · 2017-09-04T08:25:49

use this code

$scope.control={
      punkt1:null,
      punkt2:null,
      punkt3:null,
      punkt4:null,
      punkt5:null
};

and now in your view you can check your control properties

Hide <li> element if a scope value is null

1 Answers