AngularJS - 过滤空对象

Oam*_*Psy 15 angularjs angularjs-scope angularjs-ng-repeat angular-filters

我有一个$ scope.myData对象,包含一大块数据.我想要做的是显示数据,但过滤掉空值和空字符串:

$scope.myData = [
    {
       "ID" : "001",
       "Message" : "test test test test"
    },
    {
       "ID" : "002",
       "Message" : "test test test test"
    },
    {
       "ID" : "003",
       "Message" : "test test test test"
    },
    {
       "ID" : "004",
       "Message" : "test test test test"
    },
    {
       "ID" : "005",
       "Message" : " "
    },
    {
       "ID" : "006",
       "Message" : "test test test test"
    },
    {
       "ID" : "007",
       "Message" : "test test test test"
    },
    {
       "ID" : "007",
       "Message" : null
    }
]
Run Code Online (Sandbox Code Playgroud)

我可以在上面执行ng-repeat并通过以下方式过滤null:

<div ng-repeat="data in myData | filter:{Message: '!!'}">
    {{ data.ID }}
    {{ data.Message }}
</div>
Run Code Online (Sandbox Code Playgroud)

但是如何过滤空字符串,例如:

"Message" : " "
Run Code Online (Sandbox Code Playgroud)

谢谢

Ani*_*rma 56

我们可以简单地使用ng - 如果在这里:

<div ng-repeat="data in myData " ng-if="data.Message">
 {{ data.ID }}
 {{ data.Message }}
</div>
Run Code Online (Sandbox Code Playgroud)

  • 这是最好的答案! (2认同)

Edm*_*son 18

您可以使用函数而不是像这样的对象

<div ng-repeat="data in myData | filter:emptyOrNull">
  {{ data.ID }}
  {{ data.Message }}
</div>
Run Code Online (Sandbox Code Playgroud)

并在控制器中

$scope.emptyOrNull = function(item){
  return !(item.Message === null || item.Message.trim().length === 0)
}
Run Code Online (Sandbox Code Playgroud)


Rah*_*zir 7

那么你可以创建一个自定义过滤器:

.filter('hasSomeValue', [function(){
    return function(input, param) {
        var ret = [];
        if(!angular.isDefined(param)) param = true;

        angular.forEach(input, function(v){
            if(angular.isDefined(v.Message) && v.Message) {
                v.Message = v.Message.replace(/^\s*/g, '');
                ret.push(v);
            }
        });

        return ret;
    };
}])
Run Code Online (Sandbox Code Playgroud)

在你的HTML中:

<div ng-repeat="data in myData | hasSomeValue: data.Message">
Run Code Online (Sandbox Code Playgroud)

DEMO


小智 4

您可以使用“”包机。尝试这样检查。

<div ng-repeat="data in myData | filter:{Message: ''}">
Run Code Online (Sandbox Code Playgroud)