带有自定义“过滤器”的AngularJS表达式？答案

【问题标题】：AngularJS expression with custom "filter"?带有自定义“过滤器”的AngularJS表达式？
【发布时间】：2016-02-15 12:47:13
【问题描述】：

我正在使用 GET 加载一些用户配置文件数据，就像这样 -

MainController.js

   $http({
        method: 'GET',
        url: config.serverUrl + '/profile'
    }).then(function successCallback(response) {
        $scope.userdata = response.data.message.user;
    }, function errorCallback(response) {
         toastr.error('Something is wrong.');
    });

服务器响应

{
    "success": true,
    "message": {
        "user": {
            "id": 36,
            "email": "user@gmail.com",
            "name": "Rusty Rittenhouse"
        }
    }
}

现在，我使用以下表达式来显示用户名：

{{ userdata.name }} -> inputs "Rusty Rittenhouse"

我怎样才能只显示“Rusty”？ 通常我会使用拆分，但由于我是 Angular 新手，我不知道什么是最好和最简洁的解决方案。

【问题讨论】：

标签： angularjs expression

【解决方案1】：

你可以写一个custom filter来做到这一点：

angular.module('myApp', []).filter('firstName', function() {
    return function(input) {
        return input.split(' ')[0];
    };
});

并像这样使用它：

{{ userdata.name | firstName }}

甚至更好：

<div/span ng-bind="userdata.name | firstName"></div/span>

【讨论】：

哇，谢谢，它非常整洁。你会说在这种情况下使用过滤器是正确的吗？
是的，只要你不想实际修改原始数据并且它不是使用过滤器的繁重功能就可以了，只要记住过滤器可以运行数百次，所以保持轻量级
会不会是 userdata 或 userdata.name 未定义？
您可以随时添加：return input ? input.split(' ')[0] : ' ';
它会在您的数据加载之前尝试触发过滤器，如果您添加我上次评论中的代码，您应该不再有错误