检查对象是否为空,是否使用ng-show而不是控制器?

时间:2021-04-03 19:37:24

I have a JS object declared like so

我有一个JS对象这样声明。

$scope.items = {};

I also have a $http request that fills this object with items. I would like to detect if this item is empty, it appears that ng-show supports this... I enter

我还有一个$http请求,它用项填充这个对象。我想检测一下这个项目是否为空,ng-show支持这个…我进入

ng-show="items"

and magically it works,I would also like to do the same from a controller but i can't seem to get it to work, it appears I may have to iterate over the object to see if it has any properties or use lodash or underscore.

神奇的是,我也想从控制器上做同样的事情但是我似乎不能让它工作,我可能需要遍历对象来查看它是否有任何属性或者使用lodash或下划线。

Is there an alternative?

有另一个吗?

I did try

我做了尝试

alert($scope.items == true);

but it always returns false , when the object is created and when populated with $http, so its not working that way.

但是在创建对象和使用$http填充时,它总是返回false,所以它不会那样工作。

9 个解决方案

#1


58  

Use an empty object literal isn't necessary here, you can use null or undefined:

这里不需要使用空对象文字,可以使用null或undefined:

$scope.items = null;

In this way, ng-show should keep working, and in your controller you can just do:

这样,ng-show就可以继续工作,在你的控制器中你可以做:

if ($scope.items) {
    // items have value
} else {
    // items is still null
}

And in your $http callbacks, you do the following:

在您的$http回调中,您执行以下操作:

$http.get(..., function(data) {
    $scope.items = {
        data: data,
        // other stuff
    };
});

#2


192  

Or you could keep it simple by doing something like this:

或者你可以这样做:

alert(angular.equals({}, $scope.items));

#3


69  

In a private project a wrote this filter

在一个私有项目中,a编写了这个过滤器

angular.module('myApp')
    .filter('isEmpty', function () {
        var bar;
        return function (obj) {
            for (bar in obj) {
                if (obj.hasOwnProperty(bar)) {
                    return false;
                }
            }
            return true;
        };
    });

usage:

用法:

<p ng-hide="items | isEmpty">Some Content</p>

testing:

测试:

describe('Filter: isEmpty', function () {

    // load the filter's module
    beforeEach(module('myApp'));

    // initialize a new instance of the filter before each test
    var isEmpty;
    beforeEach(inject(function ($filter) {
        isEmpty = $filter('isEmpty');
    }));

    it('should return the input prefixed with "isEmpty filter:"', function () {
          expect(isEmpty({})).toBe(true);
          expect(isEmpty({foo: "bar"})).toBe(false);
    });

});

regards.

的问候。

#4


56  

another simple one-liner:

另一个简单的一行程序:

var ob = {};
Object.keys(ob).length // 0

#5


26  

If you couldn't have the items OBJ equal to null, you can do this:

如果你不能让项目OBJ等于null,你可以这样做:

$scope.isEmpty = function (obj) {
    for (var i in obj) if (obj.hasOwnProperty(i)) return false;
    return true;
};

and in the view you can do:

你可以这样看:

<div ng-show="isEmpty(items)"></div>

You can do

你可以做

var ob = {};
Object.keys(ob).length

Only if your browser supports ECMAScript 5. For Example, IE 8 doesn't support this feature.

只有当你的浏览器支持ECMAScript 5时。例如,IE 8不支持这个特性。

See http://kangax.github.io/compat-table/es5/ for more infos

见http://kangax.github。io / compat-table es5 /更多的信息

#6


6  

Or, if using lo-dash: _.empty(value).

或者,如果使用lo-dash: _.empty(值)。

"Checks if value is empty. Arrays, strings, or arguments objects with a length of 0 and objects with no own enumerable properties are considered "empty"."

检查值是否为空。长度为0的数组、字符串或参数对象和没有自己可枚举属性的对象被认为是“空的”。

#7


5  

if( obj[0] )

a cleaner version of this might be:

一个更清晰的版本可能是:

if( typeof Object.keys(obj)[0] === 'undefined' )

where the result will be undefined if no object property is set.

如果没有设置对象属性,结果将是未定义的。

#8


0  

Check Empty object

检查空对象

$scope.isValid = function(value) {
    return !value
}

#9


-10  

you can check length of items

你可以检查物品的长度

ng-show="items.length"

#1


58  

Use an empty object literal isn't necessary here, you can use null or undefined:

这里不需要使用空对象文字,可以使用null或undefined:

$scope.items = null;

In this way, ng-show should keep working, and in your controller you can just do:

这样,ng-show就可以继续工作,在你的控制器中你可以做:

if ($scope.items) {
    // items have value
} else {
    // items is still null
}

And in your $http callbacks, you do the following:

在您的$http回调中,您执行以下操作:

$http.get(..., function(data) {
    $scope.items = {
        data: data,
        // other stuff
    };
});

#2


192  

Or you could keep it simple by doing something like this:

或者你可以这样做:

alert(angular.equals({}, $scope.items));

#3


69  

In a private project a wrote this filter

在一个私有项目中,a编写了这个过滤器

angular.module('myApp')
    .filter('isEmpty', function () {
        var bar;
        return function (obj) {
            for (bar in obj) {
                if (obj.hasOwnProperty(bar)) {
                    return false;
                }
            }
            return true;
        };
    });

usage:

用法:

<p ng-hide="items | isEmpty">Some Content</p>

testing:

测试:

describe('Filter: isEmpty', function () {

    // load the filter's module
    beforeEach(module('myApp'));

    // initialize a new instance of the filter before each test
    var isEmpty;
    beforeEach(inject(function ($filter) {
        isEmpty = $filter('isEmpty');
    }));

    it('should return the input prefixed with "isEmpty filter:"', function () {
          expect(isEmpty({})).toBe(true);
          expect(isEmpty({foo: "bar"})).toBe(false);
    });

});

regards.

的问候。

#4


56  

another simple one-liner:

另一个简单的一行程序:

var ob = {};
Object.keys(ob).length // 0

#5


26  

If you couldn't have the items OBJ equal to null, you can do this:

如果你不能让项目OBJ等于null,你可以这样做:

$scope.isEmpty = function (obj) {
    for (var i in obj) if (obj.hasOwnProperty(i)) return false;
    return true;
};

and in the view you can do:

你可以这样看:

<div ng-show="isEmpty(items)"></div>

You can do

你可以做

var ob = {};
Object.keys(ob).length

Only if your browser supports ECMAScript 5. For Example, IE 8 doesn't support this feature.

只有当你的浏览器支持ECMAScript 5时。例如,IE 8不支持这个特性。

See http://kangax.github.io/compat-table/es5/ for more infos

见http://kangax.github。io / compat-table es5 /更多的信息

#6


6  

Or, if using lo-dash: _.empty(value).

或者,如果使用lo-dash: _.empty(值)。

"Checks if value is empty. Arrays, strings, or arguments objects with a length of 0 and objects with no own enumerable properties are considered "empty"."

检查值是否为空。长度为0的数组、字符串或参数对象和没有自己可枚举属性的对象被认为是“空的”。

#7


5  

if( obj[0] )

a cleaner version of this might be:

一个更清晰的版本可能是:

if( typeof Object.keys(obj)[0] === 'undefined' )

where the result will be undefined if no object property is set.

如果没有设置对象属性,结果将是未定义的。

#8


0  

Check Empty object

检查空对象

$scope.isValid = function(value) {
    return !value
}

#9


-10  

you can check length of items

你可以检查物品的长度

ng-show="items.length"