Используйте функцию в ng-классе в угловых js - PullRequest
0 голосов
/ 17 мая 2018

Я использую ng-class для добавления классов CSS.Несмотря на то, что об этом много статей, я не могу добавить вызов функции с ng-class.

. У меня есть следующее выражение.

ng-class="{'highlighter-row-Class' : (file.id == 1 && file.processed),
    'bold-row-Class' : lastSelectedResumeId == file.attributes.name, 
    'failed-doc': !file.processed}"

Теперь можно добавить несколько классов.Однако я хочу добавить еще одно условие, которое будет вызывать метод и возвращать имя класса:

$scope.getclass = function() {
  return 'someclass';
}

Моя попытка использовала этот метод в ng-class после последнего условия, но это не былоза работой.Итак, может кто-нибудь сказать мне, как я могу сделать это правильно с ng-class?


Еще одна попытка (после предложений):

ng-class="[{'highlighter-row-Class' : (file.id == 1 && file.processed),
    'bold-row-Class' : lastSelectedResumeId == file.attributes.name, 
    'failed-doc': !file.processed }, getClassForHrms(file)]"

Функция:

$scope.getClassForHrms = function (file) {
    if (file.attributes.hrmsMandatoryFieldsMissing) {
        return "missingfieldspresent";
    } else if (file.attributes.isDocumentDuplicated) {
        return "documentduplicate";
    } else if (!file.attributes.isDocumentDuplicated) {
        return "documentuploadfailed";
    }
};

Используемый CSS:

.missingfieldspresent {
  color: red;
}
.documentduplicate {
  color: purple;
}
.documentuploadfailed {
  color: deeppink;
}

Это то, что в результате HTML отображает

<tr ng-repeat="file in processResumeFiles" ng-class="[{'highlighter-row-Class' : (file.id == 1 &amp;&amp; file.processed), 
    'bold-row-Class' : lastSelectedResumeId == file.attributes.name, 
    'failed-doc': !file.processed }, getClassForHrms(file)]" 
    class="ng-scope [object Object] documentduplicate">

1 Ответ

0 голосов
/ 17 мая 2018

Вам нужен массив классов, где один элемент массива может быть объектом классов с условиями, а другой - вызовом вашей функции.Пример simple :

ng-class="[{'some_class' : condition}, function_class()]"

Вот демоверсия:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.bb = function() {
    return "b";
  }
});
.a {
  color: #999999;
}

.b {
  background-color: #F1F1F1;
}

.c {
  font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <br><input type="checkbox" ng-model="aa" /> A: color : #999999
  <br><input type="checkbox" ng-model="cc" /> C: font-size : 30px

  <div ng-class="[ bb(), {'a':aa, 'c':cc} ]">
    <p>Testing classes</p>
  </div>

</div>

Для вашего примера, я думаю, вам нужно:

ng-class="[{'highlighter-row-Class' : (file.id == 1 && file.processed) 
        ,'bold-row-Class' : lastSelectedResumeId == file.attributes.name, 
       'failed-doc': !file.processed}, getclass()]"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...