评估 ng-show 和 ng-class 的空数组时结果不一致答案

【问题标题】：Inconsistent results when evaluating an empty array for ng-show and ng-class评估 ng-show 和 ng-class 的空数组时结果不一致
【发布时间】：2015-05-03 09:09:51
【问题描述】：

我正在使用控制器加载数组，然后根据数组是否加载来显示和隐藏内容。但是，对于 ng-show 和 ng-class 的不同实例，数组的值会有所不同。

我的服务（数组更新的地方）是：

'use strict';

angular.module('yeahdoneit')
.factory('Adate', function ($resource, $http, Alerts, Styling, $filter) {

return {

  Adates: null,

  getPersonAdates: function(personid, callback) {
    var self = this;
    var promise = $http.get('/api/personadates/'+ personid);

    promise.then(function(response){
        self.Adates = response.data;
        callback();
        Styling.setLoading(false);
    }).catch(function(e){
       throw e;
    }).then(function(res){
        // do more stuff
    }).catch(function(e){
        // handle errors in processing or in error.
       Alerts.setMessage(
            Alerts.getAlertTypes().alertType_Error, 
            Alerts.getAlertTitles().alertTitle_Error, 
            Alerts.getAlertMessages().alertMessage_ErrorGettingAdate, 
            false);
        callback();
       Styling.setLoading(false);
    });          
  }
}
});

这是调用服务加载数组的控制器：

angular.module('ydi')
.controller('MypeopleCtrl', function ($scope, $http, Styling, Person, Adate, Alerts, $timeout, $filter) {

$scope.Styling = Styling;
$scope.activeItem = null;
$scope.Person = Person;
$scope.Adate = Adate;

Person.getMyPersons();

$scope.loadPerson = function($event, personid) {

    Styling.setLoading(true);
    $scope.activeItem = personid;

    Adate.getPersonAdates(personid, function() {
        console.log("ADATE - Adate.Adates", Adate.Adates);
        if (Person.ThePerson === null || personid !== Person.ThePerson._id)
        {
            Person.ThePerson = $filter('filter')($scope.Person.Persons, {_id:personid})[0];
        }
    });

    console.log("MYPEEPS: Adate.Adates",Adate.Adates);
};
});

这是显示代码的模板视图：

<div id="person" ng-class="{ active: Adate.Adates }" >
    <div ng-show="Adate.Adates">
        ... content here ...
    </div>
    <div ng-show="!Adate.Adates" class="rc_instruction">
      <p class="sidenotes"><i class="fa fa-hand-o-left"></i> Click on one of your people over there</p>
      <p class="sidenotes"><i class="fa fa-hand-o-right"></i> Their details will appear over here</p>
    </div>
</div>

当显示视图并且 getPersonAdates 运行并填充数组时，如果数组有内容，一切正常，但是当该数组为空时，会发生以下情况：

父 div 上的 ng-class 评估为 true 并将类设置为活动。
第一个子 div 上的 ng-show 评估为 false 并且不显示。（它有一个 ng-hide 属性）。
第二个子 div 上的 ng-show 也评估为 false 并且不显示！（它有一个 ng-hide 属性）。

当数组为空时，这是 chrome 元素检查器中这两个子 div 标签的输出：

<div ng-show="Adate.Adates" class="ng-hide"> ... </div>     
<div ng-show="!Adate.Adates" class="rc_instruction ng-hide"> ... </div>

他们有什么理由会做出不同的评估吗？我错过了什么明显的东西吗？

【问题讨论】：

你能创建一个可重现问题的 plunkr 吗？

标签： javascript angularjs ng-class ng-show

【解决方案1】：

在第一种情况下，ng-class 将您的表达式评估为true，因为在 JavaScript 中，Array 是 Object 的一个实例。它检查您的Adate.Adates 是否存在并返回true

试试吧：

if ( Adate.Adates ) {
    // this code will execute when your Adates has an empty array
}

您可以使用.length 属性修复它：

<div id="person" ng-class="{ active: Adate.Adates.lenght }" >

但是ng-show 指令使用toBoolean 函数来评估表达式：

function toBoolean(value) {
  if (value && value.length !== 0) {
    var v = lowercase("" + value);
    value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
  } else {
    value = false;
  }
  return value;
}

这就是为什么 ng-show 和 ng-class 的结果不同

更新：

这个问题在 1.3 版本中修复，ng-show 不应该再使用这个函数了：

ngShowHide.js v.1.2.27

ngShowHide.js v.1.3.x

Github 问题：https://github.com/angular/angular.js/issues/3969

【讨论】：