Question

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

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

我该怎么做？

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

Answer 1

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

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

但是，在您的情况下，您需要在repeat语句之前应用该类。在这种情况下，由于div数组可以包含不同的状态，所以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>

Answer 2

您需要的ng-class

template:
     '<div class="panel panel-default  panel-danger ">\
 <div class="panel-heading panel-height" ng-repeat="item in items" 
ng-class="{ \'red\': item.Status == \'Negative\', \'green\': item.Status == \'Positive\' }">\
    <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>',

documentation

在ng-repeat

2 个答案: