Несогласованные результаты при оценке пустого массива для ng-show и ng-class

Я использую контроллер для загрузки массива, а затем показываю и скрываю содержимое в зависимости от того, загружен массив или нет. Однако значение массива оценивается по-разному для разных экземпляров 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 запускается и заполняет массив, если в массиве есть содержимое, все работает нормально, но когда этот массив пуст, происходит следующее:

  1. Класс ng в родительском div оценивается как true и устанавливает класс как активный.
  2. ng-show в первом дочернем div оценивается как false и не отображается. (у него есть атрибут ng-hide).
  3. ng-show во втором дочернем div также оценивается как false и не отображается! (у него есть атрибут ng-hide).

Это вывод для этих двух дочерних тегов div в инспекторе элементов в Chrome, когда массив пуст:

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

Есть ли причина, по которой они будут оценивать по-разному? Я упускаю что-то очевидное?


javascript angularjs ng-class ng-show
person Ben Drury    schedule 03.05.2015    source источник
comment
не могли бы вы создать plunkr с воспроизводимой проблемой?   -  person Pankaj Parkar    schedule 03.05.2015

Ответы (1)


arrow_upward
2
arrow_downward

В первом случае 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. х

Проблема Github: https://github.com/angular/angular.js/issues/3969< /а>

person Artem Petrosian    schedule 03.05.2015