Angular 自定义指令在 ng-repeat 中使用 if 条件

Question

我正在使用面板来显示本质上是动态的响应。我想使用 2 种不同的颜色来区分面板，即，如果响应的状态为肯定，则面板或面板的标题必须为绿色。如果状态为负，则必须为红色。因为我使用的是自定义指令，所以我无法使用 ng-if。

我的回复中可能存在子数组。如何在我的指令中访问和显示它们？

我该怎么做？

如果状态为正，我希望输出面板为绿色，如果状态为负，我希望输出面板为红色

Answer 1

您可以使用 ng-class 角度指令应用条件类。

删除所有应按条件应用的类。将这些类添加为ng-class。

但在您的情况下，您需要在重复语句之前应用该类。在这种情况下，由于它是一个可以包含不同状态的数组，因此面板 div 只能显示一种状态。您可以使用数组的第 0 个元素或其他任何元素。我考虑过第 0 个。

app.directive('showHide', function() {
    return {
        restrict: 'E',
        scope: {
        items : '=',

        },
        template:
        `<div class="panel"
            ng-class="{'panel-danger': items[0].Status === 'Negative', 
                       'panel-default': items[0].Status === 'Positive'}">
            <div class="panel-heading panel-height" ng-repeat="item in items">
            <h3 class = "panel-title">
                <p class="font">ID: {{item.Id}}</p></h3><br>
            <p class="font">DESCRIPTION: {{item.Desc}}</p><br>
            <p class="font">STATUS: {{item.Status}}</p><br>
            </div></div></div>`,
    };
});

更新

为指令创建一个新的模板文件。而不是在指令中包含模板。

show-hide-directive.js

app.directive('showHide', function() {
    return {
        restrict: 'E',
        scope: {
            items : '=',
        },
        templateUrl: 'show-hide-directive.html' // <-- Path to the template html file
    };
});

show-hide-directive.html

<div class="panel" ng-class="{'panel-danger': items[0].Status === 'Negative', 'panel-default': items[0].Status === 'Positive'}">
    <div class="panel-heading panel-height" ng-repeat="item in items">
        <h3 class = "panel-title">
            <p class="font">ID: {{item.Id}}</p>
        </h3>
        <br>
        <p class="font">DESCRIPTION: {{item.Desc}}</p><br>
        <p class="font">STATUS: {{item.Status}}</p><br>
    </div>
</div>