如何在 html 中添加 angular 值前缀？

Question

如何在 HTML 侧为 angular 值添加前缀。

在我的项目中，我使用以下行来显示邮政编码。

<span>{{activeProperty.Zip}}</span>

我希望在显示 zip 时，它会检查 activeProperty.Zip 长度是否为 5 或 not.if 是否小于 5 然后将前导零添加到 activeProperty.Zip

例如，如果有 4567，它将显示 04567，但如果有 45670，则将只显示 46670。

我不想在 angular 端这样做，因为在控制器中更新 activeProperty.Zip 会导致很多问题，因为在很多地方使用相同的控制器。他们在 HTML 方面有什么办法吗？

Answer 1

您需要创建一个用零填充 zip 的过滤器，请参阅此 fiddle：

http://jsfiddle.net/HB7LU/11739/

myApp.filter('pad', function () {
    return function(zip) {
        var newZip = zip;
        if (zip.length < 5) {
            newZip = Array(6 - zip.length).join('0') + newZip;
        }
        return newZip;
    };
});

在你的 html 中：{{activeProperty.Zip | pad}}

Answer 2

您仍然可以在 angular 方面使用过滤器而无需更改模型，这里是您可以扩展以供使用的简单示例

app.filter('prefixMe', function() {
  return function(input) {
    return input.length < 5 ? '0' + input : input
  };
});

<span>{{activeProperty.Zip | prefixMe}}</span>

如何在 html 中添加 angular 值前缀？

How to Prefix an angular value in html?

angularjs

angular-ui

angularjs-directive