隐藏 <li> Umbraco网格编辑器的列表组中的元素

Question

我为Umbraco制作了一个自定义网格编辑器，该编辑器接受6个字符串（1个标头和5个列表项），并显示在列表组中，如下所示： http : //i.imgur.com/ohExdCU.png

但是，如果用户未输入其余项目的值，则不应显示li元素。

我的控制器非常简单，因为它只包含各种字符串的作用域：

angular.module("umbraco").controller("my.custom.grideditorcontroller", function ($scope) {
    $scope.control.heading;
    $scope.control.punkt1;
    $scope.control.punkt2;
    $scope.control.punkt3;
    $scope.control.punkt4;
    $scope.control.punkt5;
});

内容编辑器显示6个文本框，用于在以下位置输入内容：

<input type="text" ng-model="control.heading" placeholder="Indtast overskrift">
<input type="text" ng-model="control.punkt1" placeholder="Indtast første punkt...">
<input type="text" ng-model="control.punkt2" placeholder="Indtast andet punkt...">
<input type="text" ng-model="control.punkt3" placeholder="Indtast tredje punkt...">
<input type="text" ng-model="control.punkt4" placeholder="Indtast fjerde punkt...">
<input type="text" ng-model="control.punkt5" placeholder="Indtast femte punkt...">

这就是视图中呈现的内容：

@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>
<div class="">
    <div class="list-group">
        <div class="list-group-item">
            <h4 class="list-group-item-heading">@Model.heading</h4>
            <ul class="ul-with-bullets">
                <li>@Model.punkt1</li>
                <li>@Model.punkt2</li>
                <li>@Model.punkt3</li>
                <li>@Model.punkt4</li>
                <li>@Model.punkt5</li>
            </ul>
        </div>
    </div>
</div>
<br />

如何检查是否基于我的范围值显示li元素？ 我尝试使用“ng-if="@Model.punkt1！= null”，但对于没有输入输入的值，它仍然返回空的li元素。

Answer 1

您的模型似乎不为空，并且包含一个空值。 您可以尝试以下操作，这将检查该值是否为null，空或未定义：

<ul class="ul-with-bullets">
    <li ng-if="@Model.punkt1">@Model.punkt1</li>
    <li ng-if="@Model.punkt2">@Model.punkt2</li>
    <li ng-if="@Model.punkt3">@Model.punkt3</li>
    <li ng-if="@Model.punkt4">@Model.punkt4</li>
    <li ng-if="@Model.punkt5">@Model.punkt5</li>
</ul>