angularjs 如果值为空,则显示“-”?

qlckcl4x  于 2023-04-19  发布在  Angular
关注(0)|答案(6)|浏览(190)

有没有什么方法可以用angular来表达这样的意思:

<th ng-repeat=" o in Odds" >{{o.Name || "-"}}</th>

那么如果o.Name中没有数据要显示“-”呢?

myzjeezk

myzjeezk1#

您的示例应该可以工作,但如果您在o.name中有空格或函数,则它不会解析为falsey,并且您将在HTML中获得不可见的空格,而不是所需的破折号。
可以使用通用过滤器来替换破折号的空值,并首先对输入应用各种归一化:

angular.module('App.filters', []).filter('placeholder', [function () {
    return function (text, placeholder) {
        // If we're dealing with a function, get the value
        if (angular.isFunction(text)) text = text();
        // Trim any whitespace and show placeholder if no content
        return text.trim() || placeholder;
    };
}]);

然后,您可以按如下方式使用它:

<th ng-repeat=" o in Odds" >{{o.Name | placeholder:'-'}}</th>

然后,对于其他行/列以及您想要应用相同规则的任何其他地方,这是完全可重用的。
示例:http://jsfiddle.net/kfknbsp7/4/

wvyml7n5

wvyml7n52#

在这种情况下,你可以像这样使用ngIf:

<th ng-repeat=" o in Odds" >
        <span ng-if="o.Name">{{o.Name}}</span>        
        <span ng-if="!o.Name"> - </span>
   </th>
cs7cruho

cs7cruho3#

如果这不起作用,您可以使用ngIf

<th ng-repeat="o in Odds">
    <span ng-if="o.Name">{{o.Name}}</span>
    <span ng-if="!o.Name">-</span>
</th>
vd2z7a6w

vd2z7a6w4#

创建不适用的.pipe.ts

@Pipe({name: 'NA'})

export class Notapplicable implements PipeTransform {
  transform(value: string): string {
    let newStr: string = "";
    if(value=='')
    {
        newStr="NA";
    }
    else{
        newStr=value;
    }
    return newStr;
  }
}

将此包含在应用程序模块中

import { Notapplicable } from './notapplicable.pipe.ts';

declarations: [
    AppComponent,
    Notapplicable
  ],....

并在HTML文件中以这种方式使用它

<tr *ngFor="let article of articledata">
            <td>{{article.a | NA}}</td>
            <td>{{article.b | NA}}</td>
            <td>{{article.c | NA}}</td>
            <td>{{article.d | NA}}</td>
</tr>

这样,如果字符串为空,就可以显示NA

snvhrwxg

snvhrwxg5#

也可以使用三元运算符
{{o.Name??o.Name:“-"}}

js5cn81o

js5cn81o6#

如果在Aungular 5中,你可以在ng中使用if else。
这样做的好处是,如果您有多个记录想要显示:if has records show what you have if not show '-'. then you only need to write one ng-template.

<td ng-if="o.Name; else showNA">{{ o.Name }}</td>
 <td ng-if="o.Address; else showNA">{{ o.Address }}</td>
 <td ng-if="o.Phone; else showNA">{{ o.Phone }}</td>

<ng-template #showNA>
<td>-</td>
</ng-template>

相关问题