Question

这对我来说似乎有点艰难。寻找关于这是否是最佳＆＃34;这样做的方法。

我在表格的一行中有一个字段。价值来自API，我要展示 - 适当的图标， - 以适当的颜色， - 使用适当的标题文本。

有更简洁的方法吗？我应该在模板中做这个逻辑吗？这应该在控制器或指令中处理吗？

<div class="ngCellText">
    <span
        ng-class="{
            'icon-default':!row.entity[col.field],
            'icon-done':row.entity[col.field] == 'AVAILABLE',
            'icon-warning':row.entity[col.field] == 'PROCESSING',
            'icon-default':row.entity[col.field] == 'NOT_AVAILABLE'
        }"

        title= "{{row.entity[col.field] == 'AVAILABLE' ? 'Available' : ''}}{{ row.entity[col.field] == 'NOT_AVAILABLE' ? 'Not Available' : ''}}{{ row.entity[col.field] == 'PROCESSING' ? 'Processing' : ''}}{{ !row.entity[col.field] ? 'Unknown' : ''}}">
        <i
            class="fa"
            ng-class="{
                'fa-check-square-o':row.entity[col.field] == 'AVAILABLE',
                'fa-times':row.entity[col.field] == 'NOT_AVAILABLE',
                'fa-clock-o':row.entity[col.field] == 'PROCESSING',
                'fa-question':!row.entity[col.field]}">
        </i>
    </span>
</div>

Answer 1

让你的类成为一个函数调用并在那里做逻辑怎么样。

     <li ng-class="computeClass()">


     $scope.computeClass = function() {
      // Put your logic to build your comma sep class string
        var ret = "AVAILABLE";
        return ret;
     };

将条件逻辑放在角度模板中

1 个答案: