Troubleshoot the issue of ng-click not functioning properly when used in conjunction with ng-repeat with direct expressions

Having some trouble with an ng-repeat block and setting a $scope variable to true with an ng-click expression. It doesn't seem to be working as expected. Can anyone help out? Check the plnkr for more information.

HTML:

selected: {{selected}}
    <ul>
      <li ng-repeat="t in t.header" ng-click="selected = true;">{{t.a1}}</li>
    </ul>

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.selected = false;
  $scope.t = {
    header: [
      {
        a1:'a1'
      },
      {
        a1:'a1'
      }
    ]
  }
});

Currently using a workaround with a function call on click to set the required variable. Curious to know why the direct assignment is not working properly?

javascriptangularjsangularjs-ng-repeatangularjs-ng-click

Answer №1

Remember to utilize $parent in ng-repeat instances due to the creation of its own scope

<li ng-repeat="t in t.header" ng-click="$parent.selected = true;">{{t.a1}}</li>

Visit Plunker for reference

Answer №2

Everything is functioning correctly, but due to the ngRepeat directive, the 'selected' variable is bound to the new scope. To avoid this issue, you can place 'selected' inside an object so that it does not create a new property on the child scope:

<li ng-repeat="t in t.header" ng-click="selectedObj.selected = true;">{{t.a1}}

$scope.selectedObj = { selected: false };

For reference, please visit this plunker.

Answer №3

Give this a try:

// Uncomment the line below if needed
//$scope.selected = false;
$scope.model = {};
$scope.model.selected = false;

Check out the Plunker example here

When working with AngularJS, keep in mind that child scopes can have their own properties that may hide or override parent scope properties of the same name. This behavior is based on JavaScript prototypal inheritance.

To deepen your understanding, visit: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer №4

To access the $parent scope, you can simply use it like this:

<li ng-repeat="t in t.header" ng-click="$parent.selected = true;">

Each item within an ng-repeat loop has its own scope.

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

Combine the values in the array with the input

I received some data from the back-end which is being written to a form, and it's in the form of an array of objects Below is the code snippet: this.companyDetailsForm = new FormGroup({ directors : new FormControl(response?.companyDirectors) ...

javascriptangulartypescript

Trigger a function upon browsing an image in angular-bootstrap-lightbox

Currently, I am utilizing angular-bootstrap-lightbox and have the need to implement a callback function that triggers when the image is altered. In particular, for the mobile view, when a user swipes left or right, I aim to capture both the image ID and t ...

angularjstwitter-bootstrapangular-uilightboxangular-bootstrap

Leveraging PapaParse for CSV file parsing in a React application with JavaScript

I am encountering an issue with reading a CSV file in the same directory as my React app using Javascript and Papaparse for parsing. Below is the code snippet: Papa.parse("./headlines.csv", { download: true, complete: function(results, f ...

javascriptreactjscsvpapaparse

Vuejs method to showcase input fields based on form names

I am working on a Vue.js form component with multiple input fields, but now I need to split it into two separate forms that will collect different user input. Form 1 includes: Name Surname Email with a form name attribute value of form_1 Form 2 i ...

javascriptformsvue.js

Having trouble setting the focus on a text box following a custom popup

Presenting a stylish message box and attempting to focus on a textbox afterward, however, it's not functioning as expected. Below is the HTML code: <a class="fancyTrigger" href="#TheFancybox"></a> <hr> <div id="TheFancybox">& ...

javascriptjqueryhtmlfancybox

Could anybody provide some assistance with JavaScript?

<div id="toggler" class="toggler"> <div id="toggler" class="line1"></div> <div id="toggler" class="line2"></div> <div id="toggler" class=& ...

javascripthtml

Unable to integrate npm package into Nuxt.js, encountering issues with [vue-star-rating] plugin

Just starting with nuxt js and running into issues when trying to add npm packages. Below are my attempts. star-raing.js import Vue from 'vue' import StarsRatings from 'vue-star-rating' Vue.use(StarsRatings) nuxt.config.js plugi ...

javascriptvue.jsnpmpluginsnuxt.js

How to use the Enter key to submit a form in react.js with the help of "@material-ui/core/Button"

Here is the form I have created using the render method for user sign-in. <form onSubmit={this.handleSubmit}> <Avatar className={classes.avatar}> <LockOutlinedIcon /> </Avatar> <Typography component="h1" varia ...

javascriptreactjsformsmaterial-ui

Custom sparkline array

In working on my sparkline chart, I have the following code snippet: <div sparkline="" values="4,4,7,5,9,6,4" data-type="line" data-height="80" data-width="100%" data-line-width="2" data-line-color="#dddddd" data-spot-color="#bbbbbb" data-fill-c ...

javascriptjqueryarraysangularjssparklines

Tips on disregarding events within an html table

I have a see-through table with a width set to 100% that houses various HTML content. I am utilizing the table to properly center a particular element on the screen. However, the table is intercepting mouse events and preventing users from clicking on lin ...

javascripthtmlcssbrowserdom-events

What is the best way to parse a JSON file and create a dynamic webpage using jQuery with the data from the

As someone who is new to working with Node.js and JSON, I am encountering some issues when trying to extract data from a JSON file. Below is the code that I have written: 'use strict'; const fs = require('fs'); let questsRawData = fs ...

javascripthtmlnode.jsjsonelectron

What is the process of redefining the toString method for a function?

I am currently tackling a coding challenge that involves chaining functions. While researching possible solutions online, I noticed that many of them involved using function.toString and overriding the toString method of a function to create a chained add ...

javascriptfunctionmethodsoverriding

What is the method for incorporating choices into a schema field in Mongoose?

If my Schema is like this: var fooSchema = new Schema({ foo: String }); and I'm looking to implement select: false for foo, how can I achieve this without altering the initial structure? var fooSchema = new Schema({ foo: { type: String, select: ...

javascriptmongoose

AngularJS - Increase the input date by 6 hours before converting it to JSON

Is there a way to add 6 hours to an input date in AngularJS? I attempted the following code: var eventStart = new Date ($scope.event.startdateid); var startDate = new Date ( eventStart ); startDate.setHours ( eventStart.getHours() + 6 ); event.startdate ...

javascriptangularjsjson

Export data table from HTML to Excel successfully implemented with C#

I am currently working on an Umbraco website and developing a custom plugin for the backend that allows users to export an Excel worksheet from an HTML table. In order to achieve this functionality, I am utilizing AngularJS along with a C# controller. Belo ...

javascriptc#angularjsumbraco7

Struggling to effectively transfer a callback function within a series of functions

I am currently utilizing the codebird library to make requests to the Twitter API. The responses from these requests are functioning as expected, but I am looking to pass that response along to my route. Below is a segment of my route.js: router.get(&apos ...

javascriptnode.jsexpresscallback

Nodejs and Express are seamlessly integrating error handling with database submission, ensuring a smooth flow of data processing

While testing my backend using nodejs and express, I encountered an issue with error handling in postman. The error message displays correctly for the 'Multiplier' column validation, but despite this, the data is being submitted into my mysql wor ...

javascriptnode.jsregexexpress

Why won't Node.js let me redirect to my error page?

I've been putting together my newsletter project with the Mailchimp API, everything seems to be working fine except for when I try to redirect to a failure page if the status code is not 200. The browser shows an error message saying 'localhost r ...

javascriptnode.jsnewslettermailchimp-api-v3.0

Global AngularJS service

I am attempting to save a response variable in a global service variable. Here is my service: (function() { angular.module('employeeApp') .service('constants', constants); function constants() { this.url = &apo ...

angularjs

Using JQuery to eliminate the current div in an image slider

I currently have an image slider that allows users to switch between images. There are two buttons - one adds a new item to the slider, while the other is supposed to remove the current image from the slider, but it doesn't seem to be working properly ...

javascriptjqueryhtmlcss