Using an if statement condition within an ng-repeat in AngularJS

Question

Using an if statement condition within an ng-repeat in AngularJS

I am currently utilizing the ng-repeat feature in AngularJS

<ul>
    <li ng-repeat="question in questions" class="question list-group-item media">
        <span class="question__type">{{ question.question }}</span>
        <br>
        <div class="btn-group question__answer justified nav-tabs">
            <a class="btn {{question.type}}" ng-repeat="answer in question.answers">{{ answer }}</a>
        </div>
    </li>
</ul>

My goal is to transform the following section into an if statement whereby if {{question.type}} == 'radio', then justify it on the btn-group div.

        <div class="btn-group question__answer justified nav-tabs">
            <a class="btn {{question.type}}" ng-repeat="answer in question.answers">{{ answer }}</a>
        </div>

javascript angularjs angularjs-scope angularjs-ng-repeat angular-ui

Answer 1

Answer №1

If you want to change the text color based on a condition, you can use the ng-class directive. I have created a jsBin example to demonstrate how it works. In this example, the "justified" class changes the text color to red when the question type is 'radio'.

<div class="btn-group question__answer nav-tabs" ng-class="{justified: question.type == 'radio'}">
    <a class="btn {{question.type}}" ng-repeat="answer in question.answers">{{ answer }}</a>
</div>

Answer 2

If you want to change the text color based on a condition, you can use the ng-class directive. I have created a jsBin example to demonstrate how it works. In this example, the "justified" class changes the text color to red when the question type is 'radio'.

<div class="btn-group question__answer nav-tabs" ng-class="{justified: question.type == 'radio'}">
    <a class="btn {{question.type}}" ng-repeat="answer in question.answers">{{ answer }}</a>
</div>

Answer 3

Answer №2

If you want to dynamically apply classes in Angular, you can make use of the ng-class directive like this:

<div class="btn-group answer__question justified nav-tabs"
   ng-class="{question.type === 'radio' ? 'radio-selected' : 'other-selected'}">
            <a class="btn {{question.type}}" ng-repeat="answer in question.answers">{{ answer }}</a>
        </div>

Answer 4

If you want to dynamically apply classes in Angular, you can make use of the ng-class directive like this:

<div class="btn-group answer__question justified nav-tabs"
   ng-class="{question.type === 'radio' ? 'radio-selected' : 'other-selected'}">
            <a class="btn {{question.type}}" ng-repeat="answer in question.answers">{{ answer }}</a>
        </div>

Using an if statement condition within an ng-repeat in AngularJS

Answer №1

Answer №2

Similar questions

Creating objects with variable-dependent values in node.js

The entered value in the <input> field is not valid

`Apply event bindings for onchange and other actions to multiple elements loaded via ajax within a specific div`

Trigger a modal from one sibling Angular component to another

Issue with Vue plugin syntax causing component not to load

Implement a logging system to track and record data from both incoming requests and outgoing responses on a server powered by Express and Node.js

Retrieve the HTML code stored as a string and showcase it within an Angular framework

Using React to trigger a child component's function upon clicking a tab

The swap feature in drag-and-drop does not have a defined function

Display various JavaScript function outputs in an HTML table for convenient tracking

Setting a specific time for a div element with opacity: A step-by-step guide

Keep sending ajax request until the page is closed

"What is the best way to have a data toggle in Vue that waits for the success or failure of

AngularJS - scope watch not being triggered even after ng-class update has been made

Guess the Number Game with while Loop

arrange according to a specific sequence

Uh-oh! Major issue: CALL_AND_RETRY_LAST Allocation was unsuccessful - system is low on memory

Mastering the use of expressions in ng-click and ng-show in AngularJS

Generating a linked pledge with AngularJS

having trouble accessing a JavaScript array in AngularJS