web-dev-qa-db-ja.com

AngularJS-空のオブジェクトをフィルタリングする

データのチャンクを含む$ scope.myDataオブジェクトがあります。私がやろうとしているのはデータを表示することですが、nullと空の文字列を除外します：

$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" : " "

ありがとう

angularjsangularjs-scopeangularjs-ng-repeatangular-filters
15
Oam Psy

ここでng-ifを使用するだけです。

<div ng-repeat="data in myData " ng-if="data.Message">
 {{ data.ID }}
 {{ data.Message }}
</div>
56
Anil Sharma

このようなオブジェクトの代わりに関数を使用できます

<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)
}
18
Edminsson

カスタムフィルターを作成できます。

.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">

[〜＃〜] demo [〜＃〜]

7
Rahil Wazir

''チャーターを使用できます。このようにチェックしてみてください。

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

これには、angularフィルターを使用できます。

作業フィドル

コードスニペット：

.filter('filterData',function(){
    return function(data) {
        var dataToBePushed = [];
        data.forEach(function(resultData){
            if(resultData.Message && resultData.Message != " ")
                dataToBePushed.Push(resultData);
        });
        return dataToBePushed;
    }
});
3
V31

空のオブジェクトの値をフィルターで除外する場合は、カスタムフィルターを作成し、値に基づいてそれぞれをフィルターできます。

このようなもの：

.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ディレクティブと、必要に応じてオブジェクトを解析する関数を使用することもできます。

0
Sensei_Shoh