Угловая пользовательская директива для использования условия if в ng-repeat - PullRequest
Новая
       34

Угловая пользовательская директива для использования условия if в ng-repeat

0 голосов
/ 03 июня 2019

Я использую панели для отображения ответа, который является динамическим по своей природе.Я хочу различать панели, используя 2 разных цвета, то есть, если ответ имеет положительный статус, заголовок панели или панели должен быть зеленым.Если статус отрицательный, он должен быть красным.Так как я использую пользовательскую директиву, я не могу использовать ng-if.

В моем ответе могут присутствовать вложенные массивы.Как мне получить к ним доступ и отобразить их в моей директиве?

Как мне это сделать?

Я ожидаю, что панель вывода будет зеленого цвета, если статус положительный, или красного цвета, если статус отрицательный

Ответы [ 2 ]

1 голос
/ 03 июня 2019

Вы можете применять условные классы, используя угловую директиву ng-class .

Удалите все классы, которые должны применяться при условии.Добавьте эти классы как ng-class.

Но в вашем случае вам нужно применить класс перед оператором repeat.В этом случае, поскольку это массив, который может содержать другое состояние, панель div может показывать только один статус.Это вы можете взять либо с 0-м элементом массива, либо с чем-либо еще.Я рассмотрел 0th. 

app.directive('showHide', function() {
    return {
        restrict: 'E',
        scope: {
        items : '=',

        },
        template:
        `<div class="panel"
            ng-class="{'panel-danger': items[0].Status === 'Negative', 
                       'panel-default': items[0].Status === 'Positive'}">
            <div class="panel-heading panel-height" ng-repeat="item in items">
            <h3 class = "panel-title">
                <p class="font">ID: {{item.Id}}</p></h3><br>
            <p class="font">DESCRIPTION: {{item.Desc}}</p><br>
            <p class="font">STATUS: {{item.Status}}</p><br>
            </div></div></div>`,
    };
});

UPDATE

Создать новый файл шаблона для директивы.Вместо использования шаблона в директиве.

show-hide-directive.js 

app.directive('showHide', function() {
    return {
        restrict: 'E',
        scope: {
            items : '=',
        },
        templateUrl: 'show-hide-directive.html' // <-- Path to the template html file
    };
});

show-hide-directive.html 

<div class="panel" ng-class="{'panel-danger': items[0].Status === 'Negative', 'panel-default': items[0].Status === 'Positive'}">
    <div class="panel-heading panel-height" ng-repeat="item in items">
        <h3 class = "panel-title">
            <p class="font">ID: {{item.Id}}</p>
        </h3>
        <br>
        <p class="font">DESCRIPTION: {{item.Desc}}</p><br>
        <p class="font">STATUS: {{item.Status}}</p><br>
    </div>
</div>
0 голосов
/ 03 июня 2019

нг-класс - это то, что вам нужно 

template:
     '<div class="panel panel-default  panel-danger ">\
 <div class="panel-heading panel-height" ng-repeat="item in items" 
ng-class="{ \'red\': item.Status == \'Negative\', \'green\': item.Status == \'Positive\' }">\
    <h3 class = "panel-title">\
    <p class="font">ID: {{item.Id}}</p></h3><br>\
    <p class="font">DESCRIPTION: {{item.Desc}}</p><br>\
    <p class="font">STATUS: {{item.Status}}</p><br>\
     </div></div></div>',

документация

...