Array vs Single Object - AngularJS / Javascript (Basic)

Question

I have a very basic array

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

I show the data in the select

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

But how do I use the data from the selected ticket from another place in my code

like

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

Controller

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

The user selects a ticketID somewhere in the page. And I want to show things related to that choice (same object) in another part of the html — user10740004
– user10740004, Commented Dec 3, 2018 at 16:50
you could create a watch on selected ticketid and whenever it changes you just need to find the corresponding record in tickets array. — Akhlesh
– Akhlesh, Commented Dec 3, 2018 at 16:53

BartoszTermena · Accepted Answer · 2018-12-03 17:39:31Z

You can use to that filter like so: 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;
        };
    })

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

georgeawg · Accepted Answer · 2018-12-03 18:07:55Z

1

Use the ng-click directive:

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

Then display the selected item:

<tr>
     <th>Name</th>
     <td>{{selected.name}}</td>
</tr>

For more information, see AngularJS ng-click Directive API Reference.

answered Dec 3, 2018 at 18:07

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives�� on Stack Overflow

Array vs Single Object - AngularJS / Javascript (Basic)

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives��� on Stack Overflow

2 Answers 2

Comments

Comments

Related

Collectives�� on Stack Overflow