Is there a way to dynamically access the ng-model name assigned to each div within a for loop in a function triggered by an ng-click event?
I have four divs on my page and I only want to display one at a time while hiding the others. My current approach involves using ng-show.
<div ng-show="content0">content0 details here...</div>
<div ng-show="content1">content1 details here... </div>
<div ng-show="content2">content2 details here...</div>
<div ng-show="content3">content3 details here... </div>
Give this a shot:
<div ng-show="current == 0">details for content0 go here...</div>
<div ng-show="current == 1">details for content1 go here... </div>
<div ng-show="current == 2">details for content2 go here...</div>
<div ng-show="current == 3">details for content3 go here... </div>
Then, use ng-click to set $scope.current to the desired content number.
To determine if the model is hidden, you would create a Boolean property for that purpose. This property can be toggled in your loop when using ngClick.
For example: http://jsfiddle.net/roadexplorer/hhJYu/
<div ng-app="app">
<div ng-controller="MainController">
<div ng-repeat="item in items">
<div ng-show="item.visible">
<h3>{{item.code}}</h3>
</div>
</div>
<button ng-click="toggleVisibility()">TOGGLE!</button>
</div>
</div>
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.items = [{
code: 101,
visible: true
}, {
code: 102,
visible: false
}, {
code: 103,
visible: true
}, {
code: 104,
visible: false
}, {
code: 105,
visible: true
}, ];
$scope.toggleVisibility = function () {
$scope.items.forEach(function (item) {
item.visible = !item.visible
})
};
}]);
As I work on developing a web application using NEXT.js, I am encountering an issue with a third party iframe that is generating numerous console logs. I am seeking a way to silence these outputs for the iframe. The code in question simply includes an < ...
Currently using Vue3 with options API, and this question does not pertain to date formatting. Looking at the code provided on StackBlitz here, the default format for the date being initially set is dd.mm.yyyy. I am interested in knowing how to set the date ...
Switching from a jquery mindset to Angular can be challenging for beginners. After reading various tutorials and guides, I am attempting to enhance my skills by developing a customizable dashboard application. Here is the HTML I have so far: <div ...
I'm currently working on adjusting the buffer size (highWaterMark) for the stdout coming from a child_process.spawn() function, but I'm encountering difficulties in achieving this successfully. The code snippet provided below demonstrates my obje ...
I received a directive for capturing scrolling events, but I am only interested in the scroll down event. .directive('whenScrolled', function() { return function(scope, elm, attr) { var raw = elm[0]; elm.bind('scroll&ap ...
I am in the process of developing a data analytics dashboard using the MEN stack (MongoDB, Express.js, Node.js). I have successfully implemented functionality to display real-time data that refreshes every 5 seconds without the need to reload the entire ...
Currently, I am utilizing [gulp-traceur][1] to convert es6 to js within my angularjs application (version 1.x). However, when attempting to compile a for loop, an error occurs: ReferenceError: $traceurRuntime is not defined It appears that I may need to ...
Looking to establish a database schema for storing the following data: { name : "xyz", admin : "admin", expense : [ jan: [{expenseObject},{expenseObject}], feb: [[{expenseO ...
As I attempt to convert some binary data from uploaded images to base64 in order to display an image, the terminal is throwing back this error: TypeError: Cannot read property 'on' of undefined I find it puzzling, as when I post I also utilize ...
I was delving into React concepts and eager to experiment with some new things. Here are a few questions that crossed my mind: Does every functional child component re-render when the parent state changes, even if it doesn't have any props? It seems ...
After using an online web tool to convert an Excel file to JSON, I now require assistance in replacing certain values within the JSON. Currently, I am using Sublime Text 2. {"Time (GMT-04:00)":"2010-07-06 08:30:00","Skin temp - average":"34,2043","Step Co ...
Is there a method to determine if a subchild has been removed from the database structure below: users:{ a: { friends: { b:Jhon, c:Ted }, b: { friends: { a: Tom } }, c: { friends:{ a: Tom } } } I a ...
I've been attempting to generate a JWT using 'jsonwebtoken' with RS256. The keys were generated using the following command: ssh-keygen -t rsa -b 4096 -m PEM -f <filename> The private key output appears as follows: -----BEGIN RSA PRIV ...
I am working on creating a bot that simulates user input for the WattsApp web website. When I manually type a message into the website, it enables a button that allows me to send the message. However, when my script runs, it finds the input box, changes t ...
My input field requires users to select a date and time. The local machine is either in GMT or BST depending on the time of year. For those unfamiliar with UK time changes: GMT (Greenwich Mean Time) is always equal to UTC BST (British Summer Time) is GM ...
Hello, I am a beginner using Swagger and trying to create simple endpoint documentation. However, I am facing an issue with my schema type and cannot figure out what's wrong. To start off, I organized my folder structure in the root src directory whe ...
Recently, I was testing out the fetch API and encountered an issue with logging a fetch error. I tried catching the error and logging it within the catch block. Strangely, even when I added additional console.log statements in the catch block, they would ...
Is it true that jQuery's trigger() only executes event handlers bound with jQuery? I have some modules that utilize native browser event binding. Although the solution from works for me, I'm curious if there is a built-in way in jQuery to handle ...
I have a "show recent" pictures div on my website that I want to refresh every 20 seconds to display a new picture. However, the issue is that my current ajax call refreshes instantly instead of after 20 seconds and it fails to delete the previous data, re ...
Having two buttons and two divs with paragraphs, I want to create tabs without adding new classes or IDs. Can I achieve tab switching using the existing IDs that end with "_one"? For instance: The first button has the ID "tab_button_one" and the first di ...