AngularJS - Филтриране на празни обекти

Имам обект $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
    }
]

Мога да изпълня ng-repeat върху горното и да филтрирам null чрез:

<div ng-repeat="data in myData | filter:{Message: '!!'}">
    {{ data.ID }}
    {{ data.Message }}
</div>

Но как мога да филтрирам празните низове, например:

"Message" : " "

Благодаря


angularjs angularjs-ng-repeat angular-filters angularjs-scope
person Oam Psy    schedule 28.07.2014    source източник
comment
Можете да използвате ng-if there.if съобщението не е празно, покажете елементи.   -  person Anil Sharma    schedule 28.07.2014
comment
@Creator - имаш ли пример?   -  person Oam Psy    schedule 28.07.2014

Отговори (6)


arrow_upward
59
arrow_downward

Можем просто да използваме ng-if тук:

<div ng-repeat="data in myData " ng-if="data.Message">
 {{ data.ID }}
 {{ data.Message }}
</div>
person Anil Sharma    schedule 28.07.2014
comment
Това е най-добрият отговор! - person Eric Keyte; 07.04.2015
comment
Редактирах този отговор, за да взема предвид, че низ с едно пространство е верен; следователно трябва да проверите и срещу отрицателното условие на този случай - person M M; 27.04.2015
comment
По-добро решение, отколкото да се налага да създавате клиентски филтър. - person Sam; 03.07.2015

arrow_upward
18
arrow_downward

Можете да използвате функция вместо обект като този

<div ng-repeat="data in myData | filter:emptyOrNull">
  {{ data.ID }}
  {{ data.Message }}
</div>

И в контролера

$scope.emptyOrNull = function(item){
  return !(item.Message === null || item.Message.trim().length === 0)
}
person Edminsson    schedule 28.07.2014

arrow_upward
7
arrow_downward

Е, можете да създадете персонализиран филтър:

.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;
    };
}])

И във вашия HTML:

<div ng-repeat="data in myData | hasSomeValue: data.Message">

ДЕМО

person Rahil Wazir    schedule 28.07.2014
comment
Това е малко по-сложно от отговора на @Edminsson, но е малко по-добро, тъй като не замърсява обхвата с функция, чиято единствена функция е да филтрира. - person adelriosantiago; 22.11.2017

arrow_upward
4
arrow_downward

Можете да използвате '' чартър. Опитайте да проверите така.

<div ng-repeat="data in myData | filter:{Message: ''}">
person Sankalpa    schedule 28.07.2014

arrow_upward
3
arrow_downward

Можете да използвате ъглов филтър за това:

Работещ Fiddle

Кодов фрагмент:

.filter('filterData',function(){
    return function(data) {
        var dataToBePushed = [];
        data.forEach(function(resultData){
            if(resultData.Message && resultData.Message != " ")
                dataToBePushed.push(resultData);
        });
        return dataToBePushed;
    }
});
person V31    schedule 28.07.2014
comment
няма да работи на двойно пространство или нещо подобно - person codersaif; 27.07.2015

arrow_upward
0
arrow_downward

Ако искате да филтрирате стойности в обект, които са празни, можете да създадете персонализиран филтър и да филтрирате всяка въз основа на стойността.

Нещо като това:

.filter("notEmpty",
function () {
    return function (object) {
        var filteredObj = {};
        angular.forEach(object, function (val, key) {
            if (val != null) {
                if (typeof(val) === "object") {
                    if (Object.keys(val).length > 0) {
                        filteredObj[key] = val;
                    }
                } else if (typeof(val) === "string") {
                    if (val.trim() !== "") {
                        filteredObj[key] = val;
                    }
                } else {
                    filteredObj[key] = val;
                }
            }
        });
        return filteredObj;
    };
});

пример за jsFiddle

Можете също така да използвате директивата ng-if и функция, която анализира обектите, както сметнете за добре.

person Sensei_Shoh    schedule 15.10.2014