Syntax for the expression used in the ng-click directive

I have two variables named wkidx and dyidx.

My goal is to create multiple collapsible elements on the same page using the angular ui bootstrap directive. I am currently facing an issue with the following code snippet:

<a 
    href=""
    class=""
    ng-click="isCollapsed{{wkidx}}{{dyidx}}  = !isCollapsed{{wkidx}}{{dyidx}}">
    Blah
</a>

Although this code successfully appends the variable values to 'iscollapsed', it triggers a syntax error that reads:

Syntax Error
error in component $parse
Syntax Error: Token 'wkidx' is at column {2} of the expression [{3}] starting at [{4}].

I have tried various modifications, but they either do not throw an error while not appending the values or append the values but result in a syntax error.

Thank you for your assistance. Below is where I currently stand, despite encountering errors due to seemingly evident reasons:

html

<div
    ng-repeat="session in day.sessions"
    ng-init="ssnidx = $index">

    <a
    href=""
    class=""
    ng-click="setCollapsed(!isCollapsed(wkidx, dyidx), wkidx, dyidx)">
    </a>

    <div
        collapse="I DONT KNOW WHAT SHOULD GO HERE">
            <p>hello from the collapsed div</p>
    </div>
</div>

app.js

$scope.setCollapsed = function(value, wkidx, dyidx) {

    };

$scope.isCollapsed = function(wkidx, dyidx) {
   if (isCollapsed + wkidx + dyidx) {
       return true;
    } else {
      return false;
     }
  };

Answer №1

Invalid ng-click expression. It is recommended to define two methods in your $scope:

setCollapsed(value, wkidx, dyidx)
and isCollapsed(wkidx, dyidx)

function MyController($scope) {
   $scope.setCollapsed = function(value, wkidx, dyidx) {
       //...
   };
   $scope.isCollapsed = function(wkidx, dyidx) {
       //...
   };
}

<a 
    href=""
    class=""
    ng-click="setCollapsed(!isCollapsed(wkidx, dyidx), wkidx, dyidx)>
    Blah
</a>

If wkidx and dyidx are properties of $scope


Responding to your updated question:

<div
    ng-repeat="session in day.sessions"
    ng-init="ssnidx = $index">

    <a
    href=""
    class=""
    ng-click="setCollapsed(!isCollapsed(wkidx, dyidx), wkidx, dyidx)">
    </a>

    <div
        ng-show="isCollaspsed(wkidx, dyidx)">
            <p>hello from the collapsed div</p>
    </div>
</div>

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

angular $stateprovider malfunctioning and causing unexpected behavior

Currently, I am utilizing angular's $stateProvider to enable routing within my application. The main HTML file is index.html and I am updating the HTML content inside it with the following code... app.config(function($stateProvider, $urlRouterProvide ...

Retrieve a targeted table from a webpage through Ajax refresh

On a webpage, I have a table that has two different views: simple and collapsible. I want to be able to toggle between these views using a button click without the need to refresh the entire page. Below is the code snippet I am currently using: $(&apo ...

How to Parse JSON Data in C# using EmberJS

Currently, I am utilizing ember-data alongside the RESTSerializer to display my model data. Initially, I aimed for it to generate JSONAPI format because it seemed like a straightforward process to handle the conversion on the server end using C#. There is ...

Using JavaScript to implement word filtering in MongoDB

I'm currently in the process of creating a chatbot designed to filter questions, and I'm seeking guidance on how to refine the search in my MongoDb based on user input. At the moment, I have the following code: I aim to retrieve all the results ...

You can use jQuery AJAX to submit two forms' data simultaneously in just one submission

I am looking to submit two sets of form data with just one click. <form id="form1"> <input type="text" name="name"> <input type="submit" value="Submit"> </form> <form id=&quo ...

Is it possible to activate multiple animations simultaneously within a single div using UIKit?

I recently started developing a to-do web application and was looking to enhance its appearance with some animations using UIKit. Currently, I have an animation that toggles when the todo-items are brought into view: <div class="todo-items uk-anim ...

Create an input field dynamically by utilizing the append method in jQuery

Concern: As part of an edit page, I am working on appending an input field from a modal window to an existing panel while retaining the format of the rest of the fields. The user is currently able to create and add the new field using the code provided in ...

Terminate the connection with nginx abruptly

Is there a way for nginx to immediately close the TCP connection once the request has been completed? ...

Angular's NgShoppingCart is designed in such a way that items stored in the localStorage are automatically cleared out

I am currently working on an Angular project using version 8.0.0. To integrate a shopping cart feature into my Angular project, I decided to incorporate the NgShoppingCart library by following the instructions provided here. After adding the library in m ...

Converting a sophisticated PHP object into a JSON string

I'm struggling with parsing a complex object in PHP to create a Json String. Despite searching through various examples online, none of them seem to work for me. To add to the challenge, my hosting platform only supports PHP 5.2 and I cannot upgrade i ...

Tips for implementing controlled components in Vue to update values in the parent component object

Utilizing controlled components, I am able to emit the selected value. For example, // app-select.vue <v-select :items="[1,2,3]" @change="$emit('input', $event)"></v-select> // parent-component.vue <app-sele ...

Tips for maintaining the data on a page continuously updating in AngularJS

I have this code snippet: $cookieStore.put('profileData', $scope.profileData); var profileData = $cookieStore.get('profileData'); $scope.init = function(){ var profileData = $cookieStore.get('pr ...

Using an array of JSON objects to set up a Backbone.js bootstrap-initialized application

Trying to bootstrap a backbone collection by using an array of JSON objects has led to some unexpected errors. When attempting to call reset on the collection object, an error from Backbone is thrown - Uncaught TypeError: undefined is not a function. Inte ...

Extract the main JSON object from a column using Spark and Scala

I am encountering difficulties in converting the root of a JSOM record into a data frame for multiple records with varying numbers. The data frame I have is generated from JSON data that looks like this: val exampleJson = spark.createDataset( """ {"I ...

Mixing pipe operators with Angular Observables in an array

In my project, I have an interesting scenario where I am using Observables and piping them to multiple functions as shown below. getOrders(filters: any, page: any = 1, orderBy: string = 'deliver_on', sort: string = 'asc') { const op ...

Extract data from JSON object

My JSON object is called idAndNames.json; [ { "id":"1", "name":"name1"}, { "id":"2", "name":"name2"}, { "id":"3", "name":"name3"} ] I'm looking to filter it by ID and name function applyFilter(id, valueItem) { return id <= valueIte ...

Angular's ng-repeat allows you to iterate over a collection and

I have 4 different product categories that I want to display in 3 separate sections using AngularJS. Is there a way to repeat ng-repeat based on the product category? Take a look at my plnkr: http://plnkr.co/edit/XdB2tv03RvYLrUsXFRbw?p=preview var produc ...

Implementing Node.js with browser cache and handling 304 responses

I am currently in the process of creating a single page application with a standard HTML layout as shown below: <html> <head> <title>...</title> <link rel="stylesheet" media="all" type="text/css" href="css/main.css"> ...

Tips on slowing down the Jquery UIBlock Plugin

Currently, I am implementing a plugin found at http://jquery.malsup.com/block/#overview. However, I am interested in configuring the blockUI feature to only be displayed if an AJAX request takes longer than 1 second. Otherwise, I would prefer for nothing ...

The responseText property is not defined in JQuery, but it is accessible and functional when using Firebug

Currently, I am in the process of writing a function that retrieves information from the Flickr API and returns it as a JSON object. When inspecting the global variable data, I can see the JSON object displayed in Firebug's console. Additionally, data ...