Tips for implementing a repeater item to function beyond the ng-repeat directive

Recently, I decided to play around with AngularJS and now I seem to be facing a small issue with ng-class. Specifically, I'm attempting to change the color of an awesome font icon.

<div ng-controller="MyCtrl">
<i ng-class="{'test': item.active}" class="fa fa-bullhorn"></i>

I have a set of checkboxes that are bound to parameters using ng-model

<div class="checkboxes">
  <form>
    <span ng-repeat="item in items">
      <input type="checkbox" ng-model="item.active"> {{item.name}}<br>
    </span>
  </form>
</div>
</div>

After clicking a checkbox, the scope reflects as:

[{"category":"category1","name":"Item1","active":true}]

Unfortunately, the i-element's class remains "fa fa-bullhorn".

The initial color is black, and the css class test is defined as:

.test{
color: red;
}

Any assistance would be greatly appreciated.

Answer №1

<i ng-class="{'announcement': item.active}" class="fa fa-bullhorn"></i>

item.active needs to be part of a repeater, as shown below:

<span ng-repeat="item in items">
   <input type="checkbox" ng-model="item.active"> {{item.name}} {{item.active}}
      <i ng-class="{'announcement': item.active}" class="fa fa-bullhorn"></i><br>
</span>

To see it in action, check out the demo here.

Answer №2

Is the icon present in the ng-repeat="item in items" loop? If not, it means that "item" is not in the icon's context.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Select2 version 4.0.3 encountering issues when trying to automatically populate additional select2 fields with data fetched through ajax

I'm encountering an issue with Select2. Essentially, I need to populate other form fields with data retrieved from Select2's Ajax search. Even after following an example found here: Select2 4.0 - Push new entry after creation I'm still un ...

Does anyone know of a CSS/JavaScript framework that can be used to replicate the look and functionality of the iOS home

I'm wondering if there is a CSS/JavaScript framework that replicates the layout of an iOS home screen. I want to create a kiosk website with a grid layout similar to Android/iOS where apps can be displayed as icons. ...

Why does my array become empty once it exits the useEffect scope?

const [allJobs, setAllJobs] = useState([]); useEffect(() => { axios.get('http://localhost:3002/api/jobs') .then(res => setAllJobs(res.data)); allJobs.map((job, i) => { if (job.language.toLowerCas ...

What causes the Woocommerce checkout button to be blocked on the checkout page?

I am perplexed by WooCommerce's decision to block this section of the screen with an overlay. Under what circumstances would it do so? checkout page screenshot ...

Limit the outcomes of the Ionic timepicker

Currently, I am utilizing the ionic datetime feature. However, instead of receiving just the hours, minutes, and seconds, the result I am getting looks like this 2020-10-05T00:00:27.634+07:00. What I actually require from this output is only 00:00:27. Is ...

Obtaining a complete element from an array that includes a distinct value

I'm attempting to retrieve a specific item from an array that matches a given value. Imagine we have an array const items = ["boat.gif", "goat.png", "moat.jpg"]; We also have a variable const imageName = "boat" Since we don't know the file ex ...

Even when only a handful of modules are utilized, Webpack still imports a significantly large existing chunk

Currently, I am working on enhancing the splitChunks configuration in a multi-page application that utilizes Webpack 5, with a PHP backend and a Vue frontend. To optimize the vendor file size, I have started customizing the test function of the vendor cac ...

Introduce new material at the start of each line, akin to what ::before accomplishes for the initial line

I am currently working on customizing the appearance of my <code>/<pre> tags while ensuring that users can still easily highlight and copy the code. The method I had in mind (shown below) only applies to the first line and doesn't repeat ...

What are the best scenarios for utilizing ng-if over ng-show/ng-hide?

My comprehension is that ng-show and ng-hide act on the class assigned to an element, while ng-if determines if an element is displayed in the HTML document. Can you provide any instances where selecting ng-if over ng-show/ng-hide or vice versa would be m ...

What is the best way to have setState function properly within setInterval? (currently functioning somewhat)

function timerFunction(){ const [time, setTime] = useState(10); var timeRemaining = 10; const myInterval = setInterval(() => { if (timeRemaining > 0) { timeRemaining = timeRemaining - 1; setTime(timeRemaining); } els ...

Looking for a way to verify the presence of a value within another properties' JSON schema?

Is it possible to validate if a value exists in other properties in the JSON file, rather than the schema file? I've tried searching for keywords like "lookup" or "reference", but all results refer to the schema file, not the JSON data. Here is the s ...

Striped artifacts can be observed in the lights of A-Frame technology, with their appearance varying depending

I'm currently using A-Frame version 1.0.4 and have experimented with both spotlights (as shown in the attached image) and direct light sources. Adjusting the shadowBias to -0.0001 only minimally impacts the artifact issue. By setting shadowMapHeight ...

What is the best approach for resolving this asynchronous task sequencing issue in JavaScript?

Below is a code snippet where tasks are defined as an object and the function definition should ensure the expected output is met. Let tasks = { ‘a’: { job: function(finish){ setTimeout(() => { ...

Press the body to update state in React and close the dropdown

Seeking a solution for closing a dropdown menu when a user clicks outside of it or on another element? Consider the following code snippet written in React: var Hello = React.createClass({ getInitialState() { return { openDropdown: false ...

Oops! The system encountered a problem while trying to identify the value `Han` for the property `Script

I'm attempting to extract Chinese characters from a string. According to this particular answer, the following code snippet should work: const nonChinese = /[^\p{Script=Han}]/gimu; const text = "asdP asfasf这些年asfagg 我开源的 几 ...

Perform an AJAX request to an encrypted URL with an unverified certificate

I'm experiencing an issue with my site that makes AJAX JSONP calls to a secured (SSL) web server. Everything works smoothly when using an unsecured (HTTP) web server, but once I switch to the SSL version, the call never returns. After checking with Fi ...

Is there a way to retrieve the timestamp of a DOM change event when using MutationObserver for event tracking?

Currently, I am successfully using MutationObserver to monitor changes in the DOM. However, I would like to include a timestamp for each event. Unfortunately, there doesn't seem to be a timestamp property available in the MutationRecord. https://deve ...

Having trouble with one of the stubs not working while unit testing with ava and sinon for an API call

Looking for advice on a test case I'm struggling with. The function I need to test involves 2 upper layer promise functions. I have stubbed all three functions, the first two are working fine but the last one is not functioning as expected. classD: c ...

How to Use Nested Rows with ng-repeat in Angular?

The code below generates the image displayed: <div class="row" ng-show="result"> <div class="col-sm-12"> <table class="table"> <thead> <tr> ...

Why does i18next only function on http://localhost:3000/de (landing page) in NextJS and not on http://localhost:3000/de/about?

I'm new to this and feeling lost on how to tackle this issue. I tried following the instructions on https://github.com/i18next/next-i18next, but I'm struggling with index.js. When I toggle /de on my landing page, it translates correctly in the UR ...