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

Displaying JavaScript Countdown in PHP Table

I have a database table with multiple fields and I am looking to create a countdown using the integer value from one of the fields (in minutes). How can I loop through and display the countdown for each row in a PHP table utilizing these values, with the a ...

Retrieving JSON data without using Jquery's Ajax function

I was wondering if there is any way to retrieve the results of a jQuery AJAX call and store them in a traditional variable for use as a function. Here's an example: function getPoints(){ //An array of JSON objects var Points; ...

AngularJS - Unchecked radio button issue

Within my code, there is an ng-repeat including several radio buttons: <div class="panel panel-default" ng-repeat="item in vm.itemList"> ... <td ng-show="item.edit"> <div class="row"> ...

Establish a predetermined selection for a radio button and its associated checkbox option

I am working on a React material UI group input field that is mapping a dataset. The result consists of one radio button and one checkbox performing the same action. Initially, I attempted to set the state to establish one data item as default. While I fol ...

Utilizing JavaScript Fetch with User Input to Integrate OpenWeather API Retains Previous Data on HTML Page

I have been working with JavaScript Fetch to retrieve data from the OpenWeather API. In my project, I have created a form where users can input the name of a city to view its weather information. However, I am facing an issue where the data from the previo ...

There seems to be an issue with the useReducer value not updating when logging it in a handleSubmit function

I'm currently incorporating useReducer into my Login and Register form. Interestingly, when I attempt to log the reducer value, it only displays the default value. However, if I log it within the useEffect hook, it functions correctly. Below is a sn ...

Update the default base URL configuration for Axios

My axios configuration looks like this: const configAxios = { baseURL: 'http://127.0.0.1:8000/api', timeout: 30000, }; Vue.prototype.$axios = axios.create(configAxios) When making a call inside my component, I use the following syntax: this ...

Ways to conceal all components except for specific ones within a container using JQuery

My HTML structure is as follows: <div class="fieldset-wrapper"> <div data-index="one">...</div> <div data-index="two">...</div> <div data-index="three">...</div> < ...

What are effective ways to eliminate script tags from a webpage?

I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...

Issues arise when JQuery functions fail to execute

This unique program showcases a series of error messages that are designed to appear under specific conditions. These conditions are identified through PHP code, following which the essential JQuery script is echoed via PHP to display the messages. Initia ...

Background Services in the Moment

Currently in the process of developing a mobile application with the Ionic framework that utilizes Laravel 4 REST API for CRUD operations on a MySQL database. As per the requirements of the app, it needs to constantly communicate with the backend service t ...

Mastering preventBack() Functionality - A Foolproof Method to Eliminate a Div on Back

This unique code prevents the page from going back when using the back button: <script type = "text/javascript" > function stopGoingBack(){window.history.forward();} setTimeout("stopGoingBack()", 0); window.onunload=function(){null}; ...

The chosen options are not appearing. Could this be a problem related to AngularJS?

I am working on setting up a dropdown menu in HTML that includes only the AngularJS tag. This dropdown menu will be used to populate another AngularJS dropdown menu. Below is the code for the first dropdown menu: <select class="form-control" ng-model=" ...

Find the position of the object in a list

I have an array that looks something like this data: Array(3) 0: data: Object account_id: (...) address_1: (...) address_2: (...) amount: 10.00 id: 1234 ... 1: data: Object account_id: (...) address_ ...

ngShow fails to function properly within a directive

I am trying to enhance my form by displaying a red star next to the input field if it is invalid. I have created a directive that adds this red star element near the input element and used ng-show with it, expecting it to only show when the input is invali ...

Setting default values for Vue prop of type "Object"

When setting default values for objects or arrays in Vue components, it is recommended to use a factory function (source). For example: foobar: { type: Object, default() { return {} } } // OR foobar: { type: Object, default: () => ({}) ...

Using the Unleash Feature server in a browser for React projects: A step-by-step guide

I'm currently working on implementing the unleash feature toggle in my React Project. Everything is running smoothly with the backend server (thanks to the Java SDK), but I've hit a roadblock when it comes to making unleash requests from the brow ...

Tips for utilizing node.io for HTML parsing with node.js?

Struggling to utilize node.io with node.js for parsing an HTML page stored as a string in a variable. Encountering difficulties passing the HTML string as an argument to my node.io job. Snippet from my node file nodeiotest.js: var nodeIOJob = requi ...

Body section CSS selector

Can a CSS selector be included within the body section of an HTML document? Here's an example of my code (although it is not functioning as expected): <html> <head> </head> <body> <div style= "a[target=_blank] {backgroun ...

When utilizing AngularJS $resource, it sends an HTTP OPTIONS request in place of the expected HTTP POST when calling the

As I work on developing a basic library application in preparation for a larger AngularJS project, I have been exploring the benefits of using $resource over $http to interact with a RESTful API. While implementing $resource seemed promising for saving tim ...