Modify the status of the variable specified within the ng-repeat loop from the controller perspective

Is it possible to modify the value of a variable declared in ng-repeat from the controller?

I am attempting to set an initial value for a basic variable called "opened" which is used for toggling within an ng-repeat, directly inside the controller.

<div ng-repeat="item in list">
    <input type="checkbox" ng-model="active[$index]" ng-click="active[$index]?opened=true:''" />
    <a href ng-click="opened=!opened"><span class="glyphicon" ng-class="opened ? 'glyphicon-triangle-bottom' : 'glyphicon-triangle-right'"></span></a>
{{item.title}}  
    <span ng-show="opened">{{item.title}}</span>    
</div>

You can find an example demonstrating this concept on Plunker. http://plnkr.co/edit/lebA2dokhq2W4AsbjKWB?p=preview

Thank you,

javascriptangularjstoggleangularjs-ng-repeat

Answer №1

It is not possible to access that scope from your controller directly.

The $scope available in your controller is the root scope. Child scopes, like the ones created by ng-repeat, inherit variables from their parent scopes and can access them. However, parent scopes cannot access child scopes.

But there is a workaround for this issue.

You can define a variable on the root scope (in your controller) and then create new properties inside the scope of ng-repeat, like so:

<div ng-repeat="item in list">
    <input type="checkbox" ng-model="active[$index]" ng-click="active[$index]?opened=true:''" />
    <a href ng-click="option.opened=!option.opened"><span class="glyphicon" ng-class="option.opened ? 'glyphicon-triangle-bottom' : 'glyphicon-triangle-right'"></span></a>
    {{item.title}}  
    <span ng-show="option.opened">{{item.title}}</span>    
</div>

In your controller, be sure to initialize this object: $scope.options = {}

Answer №2

My solution to the problem was as follows:

In my JavaScript controller, I declared:

$scope.opened = [];

In the HTML item, I added this line of code:

ng-click="opened[$index].value = (rotateImg[$index] = !rotateImg[$index])"

And in the image class, I included this:

ng-class="opened[$index].value ? 'rotate': ''"

The corresponding CSS styling is:

.rotate {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

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

The $or operator in mongoose falls short in providing complete data when paired with the find() method

I am currently utilizing the find method in conjunction with the $or operator to search the database for any duplicate data within this specific line. const duplicate = await NewItemsData.find({ $or: newItems }); Upon inspecting the variable in the consol ...

javascriptnode.jsmongodbmongoose

Display the output of JSON.stringify in a neatly formatted table

After sending my table data to the database using ajax, I am now trying to retrieve it by clicking on the open button. $.ajax({ type: "POST", url: "http://localhost/./Service/GetPageInfo", dataType: "json", ...

javascriptjqueryjsonajax

Issue with 1.bundle.js not loading during webpack production build with routing

I have been encountering an issue with my test repository for this specific problem (Link) It appears that the problem lies within the localization file, as I am using react-intl. The development version seems to be functioning properly. This is what&ap ...

javascriptexpresswebpackproductionreact-intl

Can you clarify the meaning of 'this' in an AngularJS controller?

index.html <body ng-controller="StoreController as s"> <h1 ng-click="s.changeValFunc()">{{s.carname}}</h1> <h2>{{s.carname}}</h2> </body> app.js var app = angular.module('store', []); app.controller(& ...

javascriptangularjsmodel-view-controllercontrollerangularjs-controller

Unable to find the locally stored directory in the device's file system using Nativescript file-system

While working on creating an audio file, everything seems to be running smoothly as the recording indicator shows no errors. However, once the app generates the directory, I am unable to locate it in the local storage. The code I am using is: var audioFo ...

javascripttypescriptnativescript

how to change the color of a specific item in a list created using v-for

I'm a beginner when it comes to vueJs and I'm attempting to toggle the class "active" on a single element once it has been clicked. Currently, my code toggles all elements with the class material_icons. How can I modify it to toggle only the elem ...

javascriptjqueryvue.jsv-for

Clearing up memory in ThreeJS application

I'm facing challenges with memory management in my ThreeJS application. I know there are already a few queries regarding this issue: freeing memory in three.js Freeing memory with threejs Three.js Collada - What's the proper way to dispose() a ...

javascriptmemorythree.js

Steps for Displaying Error Message when Search Result is Not Found in a JavaScript Table

After creating a table using HTML to display student data like name, degree, and profession, I added a search bar for users to find information on a specific student by typing the student's name. If the student is not in the table, a message "Result n ...

javascripthtmlcss

Adjusting the position of an iframe with a YouTube video when the window is resized

I'm struggling with resizing and moving a YouTube video embedded using the Youtube API. I'm not a web designer, so I'm facing some difficulties. When trying to resize the window, I can't seem to move or resize the video within an iframe ...

javascriptjqueryhtmliframe

Sequentially transferring data to users and processing in Node.js

I am currently working on a website using node.js with express and socket.io. The server is set up to send photos and data from every file in a directory to the user using the socket.emit function. However, I have encountered an issue with the code where ...

javascriptnode.jsexpresssocket.io

The md-select component in AngularJS is not retrieving data from the controller as expected

I am struggling with my code that is not displaying options for md-select. This specific HTML page is not the main page of my project, but rather part of my first AngularJS application. As a newcomer to AngularJS, I would greatly appreciate any assistance. ...

htmlangularjsmd-select

Challenges with Media Queries post Integration of MUI Library in React

I have been scratching my head for the last few hours. I needed to utilize a react library to design my dog app for a project. Opting for the MUI library, it has been effective for the grid layout. However, the challenge arises when attempting to implement ...

javascriptcssreactjsmaterial-ui

Using Laravel: Validate username existence with jQuery AJAX before form submission

After creating a registration form with numerous fields, I encountered an issue when submitting data and receiving validation errors. The user would have to refill empty inputs, causing unnecessary delays. To streamline the process, I am looking to impleme ...

javascriptphpajaxlaravel

The JScolor Color Picker has a slight misalignment

I am having an issue with the jscolor color picker on my webpage. The rainbow part of it appears offset within the rest of the picker. You can see what it looks like on my site here: (https://ibb.co/9N8dHXs). On my website, I have a large canvas for three ...

javascripthtmlcssjscolor

Can JavaScript/JQuery be used to dynamically alter the color of a dropdown menu or change the color of list items when a radio option is selected?

Is it possible to enhance the functionality of my code that currently selects a radio option and automatically changes the dropdown box? Can I also make the selected dropdown item change color, such as blue for 'Work', green for 'Grocery&apo ...

javascripthtmljquerydynamicradio-button

Embed a div element within a content-editable area

Is there a way to add a div with text to a contenteditable element and automatically select the text between the div tags after inserting the div? div.innerHTML +='<div id="id">selecttext</div>' I have tried this method, but it does ...

javascriptcontenteditable

Make Selenium pause and wait for AngularJS to load

Is there a way to make Python Selenium wait for a brief moment while AngularJS finishes parsing the page and loading necessary content? Alternatively, is there a way to make Selenium pause for 1 second after clicking a button that triggers an ajax request ...

pythonangularjsselenium

Tips for troubleshooting the StaleElementReferenceError in selenium automation

Encountering the persistent issue of receiving the error message StaleElementReferenceError: stale element reference: element is not attached to the page document every time I attempt to extract the text from a page body using Selenium. Numerous attempts h ...

javascriptselenium

What are some strategies for stopping a form from redirecting me while utilizing ReactJS and ExpressJS?

Recently, I created a form that redirects to the route /repair upon submission with an action of /repair. However, I would prefer to keep it as a Single Page Application (SPA) where after submitting the form, the fields are cleared, and a simple message l ...

javascriptnode.jsformsexpress

Using PHP and Ajax to automatically refresh the page once data has been fetched

Within my set interval, I have implemented a mechanism to automatically reload the page upon data retrieval. Take a look at my user interface where I showcase modal display without page refresh. With an established database connection, triggering the moda ...

javascriptphpjquerymysqlajax