Array vs Single Object - Comparing AngularJS / Javascript Data Structures (Basic)

My array is very basic

[
  {
    ticketId: 1,
    name: "John",
  },
  {
    ticketId: 124,
    name: "Ads"
  } 
]

I have displayed the data in a dropdown menu

<ul class="dropdown-menu">
    <li ng-repeat="ticket in tickets">
        <a href="#">{{ticket.ticketId}}</a>
    </li>
</ul>

Now, I want to know how to access the selected ticket's data from another part of my code

For example:

 <tr>
     <th>Name</th>
     <td>{{???}}</td>
 </tr>

In the Controller section:

   $http.get(ticketAPIBaseUrl + '/tickets/' + customerNumber, 
     {withCredentials: false}).then(response => {
       console.log(response);
       vm.tickets = response.data;
   }, error => {
      console.log(error);
   });

Answer №1

To implement the filter, follow these steps: HTML:

<input type="number" ng-model="tick"/>
<table>
     <tr ng-repeat="ticket in tickets | ticketFilter:tick">
       <td>{{ticket.name}}</td>
       <td>{{ticket.ticketId}}</td>
   </tr>
 </table>

JS:

 app.filter('ticketFilter', function(){
        return function(data, tick){
            if (!tick) return data;
            var ticketItems = [];
            angular.forEach(data, function(item){
                if(item.ticketId == tick) {
                ticketItems.push(item);
              }
            });

            return ticketItems;
        };
    })

View plunker example here: http://plnkr.co/edit/q2ixIBCm9tfUW0c2V1BC?p=preview

Answer №2

To utilize the functionality of the ng-click directive, follow these steps:

<ul class="dropdown-menu">
    <li ng-repeat="item in items">
        <a ng-click="chosen=item">{{item.itemId}}</a>
    </li>
</ul>

Subsequently, render the content of the selected item as follows:

<tr>
     <th>Category</th>
     <td>{{selected.category}}</td>
</tr>

For additional guidance, refer to the AngularJS ng-click Directive API Reference.

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

What is the best way to send the index variable to an HTML element in Angular?

Is there a way to pass the index variable to construct HTML in the append() function? .directive('grid', ['$compile', function(compile) { return { restrict: "E", scope: { elements: '=' ...

What is the process of including a pre-existing product as nested attributes in Rails invoices?

I've been researching nested attributes in Rails, and I came across a gem called cocoon that seems to meet my needs for distributing forms with nested attributes. It provides all the necessary implementation so far. However, I want to explore adding e ...

issue encountered during resource provider setup

Below is my code snippet where I'm attempting to populate a table using ngResource in a RESTful manner. However, when I include configuration directives, I encounter an uncaught object MINERR ASST:22 error. var app = angular.module('infra&apo ...

Issue TS1259: The module "".../node_modules/@types/bn.js/index"" can only be imported as the default using the 'esModuleInterop' flag

Currently, I am utilizing Hiro Stack.js which I obtained from the following link: https://github.com/hirosystems/stacks.js/tree/master/packages/transaction. For additional information, please refer to . Even when attempting to compile a fully commented out ...

Angular2 HTTP POST request

I am currently in the process of upgrading an Ionic v1 application to Ionic v2. One of my methods involves calling a WCF service. In AngularJS, I would do it like this: $http({ method: 'POST', url: url, data: JSON.stringify({ dato: 11 }), da ...

Rotate image in Vue3 using @click

I have a dashboard with a refresh button that I want to rotate 360 degrees every time it is clicked. How can I achieve this rotation effect on the image with each click of the refresh button? Below is the code snippet I have been working on, but it only r ...

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

While creating a form inside a dialog box, I encountered an issue with the date picker functionality. Whenever I try to select a date, it disappears and breaks, rendering the last days of the calendar inaccessible. You can view an example of this problem i ...

Tips for stopping webpack from creating compiled files in the source directory

I'm in the process of transitioning my AngularJs project from ES6 to TypeScript and I've integrated webpack with ts-loader. However, I've encountered an issue where the compiled files and source maps are saved in my directory instead of bei ...

Detect when a user's mouse is hovering over an iframe and escape the iframe accordingly

When the iframe window is visible, there are no issues. However, if the iframe window is set to 0px X 0px in order to hide it while still loading, consider redirecting the iframe or not displaying it at all. In case something is loaded within an iframe or ...

Discover the flawless way to transmit client geolocation to a server. Encounter an intriguing hurdle: Unable to access undefined properties (specifically 'loc') while reading

I encountered an error that says "TypeError: Cannot read properties of undefined (reading 'loc')". This error was triggered when I attempted to pass the user's location to a server through a POST request. In my HTML file, I have included th ...

Ways to connect a click event to a dynamically generated child element with the help of jQuery?

I am aware that similar questions have been asked elsewhere, but as someone new to jQuery, I am still struggling to attach a click listener to an a element within a dynamically appended ul.li.a structure in the DOM. Below is an example of how the structure ...

Tips for iterating through nested objects with a for loop

Struggling with validations in an Angular 5 application? If you have a form with name, email, gender, and address grouped under city, state, country using FormGroupname, you might find this code snippet helpful: export class RegistrationComponent implemen ...

Generating a jasmine spy on a connected promise

I am currently trying to test a service that utilizes Restangular, but I am facing difficulties in creating the correct spy on chained promises. var services = angular.module('services.dashboards', ['models.dashboards', 'models.me ...

Is there a way to render a component without having to render AppComponent constantly?

I am looking to display two components (AppComponent and UserComponent) without constantly displaying AppComponent. Here's how my code is structured: app.routing.module.ts const routes: Routes = [ { path: '', component: AppComponent ...

What exactly are Node.js core files?

I recently set up my Node.js application directory and noticed a presence of several core.* files. I am curious about their purpose - can these files be safely removed? The setup involves installing Node.js alongside Apache using mod_proxy to host one of ...

Preserve the array's status following a personalized filter in AngularJS

I am currently working with two arrays of data displayed in a tree structure and have established a relationship between them. $scope.types=['odd','prime','square','even']; $scope.items=['1','4', ...

Obtain the text that is shown for an input field

My website is currently utilizing Angular Material, which is causing the text format in my type='time' input field to change. I am looking for a way to verify this text, but none of the methods I have tried give me the actual displayed text. I a ...

Increase by one using async/await in Node.js JavaScript

Is it possible to output the result from the 'three' function to console.log in the 'one' function? one = async (number) => { console.log(`we received ${number}`) await two(number) console.log('the num ...

use javascript or jquery to conceal the textbox control

Looking to conceal a textbox control using javascript or jquery. I attempted the following code: document.getElementsByName('Custom_Field_Custom1').style.display="none"; Unfortunately, I received an error in the java console: document.getEle ...

Converting SVG with an external PNG file embedded into a standalone PNG format using Node

Does anyone know of a node package that can convert an svg file to a png, including external images embedded within the svg code like this? <?xml version="1.0" encoding="utf-8"?> <svg viewBox="0 0 120 120" height="120" width="120" xmlns="h ...