Using ng-click to manipulate variables within a list

In my ionic/angular/phonegap app, I have a list of items and I'm attempting to use an action sheet to pass in the variables. However, I am having trouble accessing the variable on the same line as the ng-repeater.

Here is the markup:

<ion-view view-title="My Pets">
  <ion-content>
    <div class="list card">
        <div class="item item-thumbnail-left item-icon-right" ng-repeat="pet in missing" ng-click="actionSheet(pet.AnimalCode)">
          <img ng-src="http://*****.com/getimage.ashx?imgid={{pet.Picture}}">
          <h2>{{pet.Name}}</h2>
          <p>{{pet.Type}} - {{pet.SubType}} </p>
          <p>{{pet.Size}} - {{pet.Colour1}}</p>
          <i class="icon ion-chevron-right"></i>
        </div>  
    </div>
  </ion-content>
</ion-view>

Backend:

$scope.actionSheet = function(PetID) {
            $log.info(PetID);
            var options = {
                title: 'Manage Pet',
                buttonLabels: ['Edit Pet', 'Report Lost', 'Share Pet'],
                addCancelButtonWithLabel: 'Cancel',
                androidEnableCancelButton: true,
                winphoneEnableCancelButton: true,
                addDestructiveButtonWithLabel: 'Delete Pet'
            };

            $cordovaActionSheet.show(options)
                .then(function(btnIndex) {
                    var index = btnIndex;
                });

PetID is empty

EDIT - Sorry i was too quick, removing the curly braces fixed it

Answer №1

After just a few moments of posting, I came across the solution on my own. The correct code should be ng-click="pet.AnimalCode" instead of {{}}

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

Issue arose when attempting to utilize the API key as an environmental variable within the Butter CMS library while working within the async

After migrating my website from Drupal to Vue, I decided to enhance the SEO performance by transitioning it to Nuxt. However, I am encountering difficulties in setting and utilizing a private API key as an environment variable in a component with the Butte ...

Managing post requests in node.js using busboy and then multer

I'm currently facing an issue with busboy (or multiparty) and multer while trying to parse my request. Initially, the request is received successfully using busboy, where I proceed to create a folder and update my database. However, when I attempt to ...

Looking to apply a filter using an object in lodash that includes a condition for a range of values

We have developed a video game database and now we need to filter users based on their game and rank preferences. The data structure is outlined below: [{ "key": 86, "position": [ 40.369, -3.5419 ], "info": { "gamesplayin ...

Unleashing the power of jQuery ajax without requiring a server

I've been incorporating jQuery ajax calls on my HTML pages. $.ajax({ url: 'search/' + page + '.html', dataType: 'text', success: function(data) { $(".searchData").html(data); $(".searchData"). ...

404 error occurs when routing in Express.js is unable to find the

Seeking Assistance I am encountering an issue with my express.post() routing as it returns a 404 state. Current Implementation The code in my server.js file seems fine, but I am facing this routing problem. // Required modules and database connection v ...

Attempting to eliminate quotation marks from JSON keys that are stored in an array

I am working with an array of JavaScript objects that represent musical notes in my front-end development. To store this data, I had to convert the object array into a JSON string using JSON.stringify(objectArray) before placing it into a hidden input fiel ...

What is the process for placing the error (404) page in the "dist" folder in a nuxt project?

I successfully implemented an error page following the documentation provided. https://nuxtjs.org/docs/2.x/concepts/views#error-page To achieve this, I created an error.vue file in the /layouts directory and assigned a custom layout to it. <template&g ...

Showing JSON object in an Angular 2 template展示JSON对象在模

When I execute the following code: stanservice.categoryDetail(this.params.get('id')) .then((data) => { this.category = JSON.stringify(data.res.rows[0]); console.log(JSON.stringify(data.res.rows[0])); }) .catch((error) => { ...

Unravel the base64 encoded message from JavaScript and process it in Python

I'm currently facing an issue in Python while trying to decode a string sent by jQuery. Although I am not encountering any errors, I receive an encoding error when attempting to open the file. My objective is to decode the string in order to save it ...

Discovering which page the form was submitted from using xsl template

Incorporating code like <input type="hidden" value="contact-form-1" name="getpage"> into my form is something I'm interested in, as it allows me to retrieve the URL of the page from which the form was submitted. The challenge arises because the ...

The CSS styling is not being rendered correctly on the AngularJS HTML page

Encountering a puzzling situation here. Our angular controller is successfully delivering data to the page, but we are facing an issue with rendering a table due to an unknown number of columns: <table border="1" ng-repeat="table in xc.tables"> ...

Creating a new URL using a JSON response in Node.js: A step-by-step guide

I am facing a query regarding the following code: The issue at hand is: How can I pass each line from response promiseGetCitiesData to promiseGetInformationDataPerCity. Is it possible to achieve this in a single async.each function? Currently, I have ...

Callback in React Setstate triggered, leading to a delay in rendering

Recently, I embarked on a journey to learn React just 2 days ago. Despite my enthusiasm, I have encountered some challenges with React's setState method. As far as my understanding goes, I should utilize the prevState parameter when I need to alter th ...

Observing changes in the height of an Angular directive

I've encountered an issue where I can't seem to get the code working properly even though the question has been asked before. Within my directive, I have found that the following piece of code functions correctly when the element's height i ...

Display or conceal div elements using JavaScript

Is there a way to hide certain divs when clicking on a specific div box? Clicking on the box will trigger the hiding of some application divs. See the first image below: When the boxes are hidden, the other divs will readjust in place of the current divs ...

Transferring information between Express and React through the Contentful API

I have embarked on a journey to explore Contentful's headless CMS, but I am encountering a challenge with their API client. My goal is to combine Express with React for server-side rendering, and I am utilizing this repository as my starting point. S ...

Enhance results by combining data from user input with data retrieved asynchronously from server-side APIs

In the process of developing a web application, I am facing a challenge. There is an input field where users can enter a number and next to it, I want to display the double of that number as the output. While this can be easily achieved using client-side J ...

Using d3 to showcase pictures sourced from a csv file

Having recently embarked on a journey to learn javascript, d3, and the polymer project, I am facing a challenge that I hope to get some guidance on. After successfully parsing a csv file containing image information and creating an array specifically for ...

Incorporating CSS styles into a dynamic JavaScript computation

I'm attempting to apply inline CSS to a JS calculation (e.g. 3*2*1) in order to make it appear red. I have experimented with using a span tag, but it only displays the calculation and not the result. I also tried utilizing an internal style sheet. Ho ...

JavaScript and AJAX: Dynamically Create URLs

I don't have any experience with web development, so could you please explain in detail? If my questions are unclear, feel free to ask for more information. Imagine I have a webpage with the following URL: www.mycompany.com/category1 This page has ...