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

Mar*_*tin 98 angularjs angularjs-scope

我有一个像这样声明的JS对象

$scope.items = {};
Run Code Online (Sandbox Code Playgroud)

我还有一个$ http请求,用项目填充此对象.我想检测这个项目是否为空,看来ng-show支持这个...我输入

ng-show="items"
Run Code Online (Sandbox Code Playgroud)

并且神奇地它可以工作,我也想从控制器做同样的事情,但我似乎无法让它工作,似乎我可能必须迭代对象,看看它是否有任何属性或使用lodash或下划线.

还有其他选择吗?

我确实试过了

alert($scope.items == true);
Run Code Online (Sandbox Code Playgroud)

但是当对象被创建并填充时$http,它总是返回false,所以它不会那样工作.

tes*_*123 198

或者你可以通过做这样的事情来保持简单:

alert(angular.equals({}, $scope.items));
Run Code Online (Sandbox Code Playgroud)


jca*_*lis 71

在一个私人项目中,写了这个过滤器

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

用法:

<p ng-hide="items | isEmpty">Some Content</p>
Run Code Online (Sandbox Code Playgroud)

测试:

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

});
Run Code Online (Sandbox Code Playgroud)

问候.

  • 我认为你在谈论一个名为filter或'filterFilter'的特定过滤器.角度过滤器可以返回您想要的任何内容,而不仅仅是给定输入的子集.请参阅https://docs.angularjs.org/api/ng/filter/. (4认同)
  • 奇迹般有效.感谢分享! (2认同)
  • 我相信过滤器应该解析内容并返回内容的子集.您描述的内容似乎更像是放在范围上的函数而不是过滤器.有关更多信息,请参阅https://docs.angularjs.org/api/ng/filter/filter. (2认同)

Ye *_*Liu 62

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

$scope.items = null;
Run Code Online (Sandbox Code Playgroud)

这样,ng-show应该继续工作,并在控制器中你可以做到:

if ($scope.items) {
    // items have value
} else {
    // items is still null
}
Run Code Online (Sandbox Code Playgroud)

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

$http.get(..., function(data) {
    $scope.items = {
        data: data,
        // other stuff
    };
});
Run Code Online (Sandbox Code Playgroud)


jaf*_*af0 61

另一个简单的单线程:

var ob = {};
Object.keys(ob).length // 0
Run Code Online (Sandbox Code Playgroud)

  • 作为一个技术性,angula在1.3(dev)分支中没有正式支持IE8,也没有在1.2(稳定)https://docs.angularjs.org/guide/ie上运行测试...此外,较少我们支持IE8,也许它最终会消失.<插入公司反驳> (8认同)
  • 这很优雅,但您必须在要定位的浏览器中检查ECMAScript5兼容性.主要的缺陷是这在IE8中不起作用. (2认同)
  • 如果你真的必须处理一个空对象,那么最好的答案 (2认同)

小智 27

如果您不能将OBJ等于null,则可以执行以下操作:

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

在视图中你可以做到:

<div ng-show="isEmpty(items)"></div>
Run Code Online (Sandbox Code Playgroud)

你可以做

var ob = {};
Object.keys(ob).length
Run Code Online (Sandbox Code Playgroud)

仅当您的浏览器支持ECMAScript 5时.例如,IE 8不支持此功能.

有关更多信息,请参阅http://kangax.github.io/compat-table/es5/


n0m*_*mad 7

if( obj[0] )
Run Code Online (Sandbox Code Playgroud)

更简洁的版本可能是:

if( typeof Object.keys(obj)[0] === 'undefined' )
Run Code Online (Sandbox Code Playgroud)

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


小智 6

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

"检查值是否为空.长度为0的数组,字符串或参数对象以及没有自己的可枚举属性的对象被视为"空".