How to select data from my controller with button click - javascript

I have a view that takes data from JSON, uses that data to populate a list of buttons (with basic information about the data) and then upon clicking the button, I want another panel to be populated with the data bound to the data in the button.
<div ng-controller="QueueCtrl">
<ul class="list-unstyled" ng-repeat="ticket in tickets">
<li><div data-queue-item></div></li>
</ul>
</div>
This part populates the list with each list item containing the ticket information I want displayed.
How do I select only the data for the ticket when I press its button to populate my other panel? For example, the next section on the page might be a button that will build an email to the person in the data: (haven't tested this code, please give me pointers if I'm doing it all wrong.
{{ ticket.email_address || "cannot find email address"}}
Problem is, I don't know how to tell it which ticket in tickets to reference...
Thanks!

Here is a working example, hope it will help you
http://plnkr.co/edit/7rAqx9nMBuzhdEAUQpZF?p=preview
You just need to use a reference
$scope.selectedTicket = {};

You can simply create a reference to the selected ticket in your scope. For example:
<div ng-controller="QueueCtrl">
<ul class="list-unstyled" ng-repeat="ticket in tickets">
<li ng-click="cont.selectedTicket = ticket"><div data-queue-item></div></li>
</ul>
</div>
And then in your panel below:
<div class="slected-ticket-info">
<div>{{cont.selectedTicket.someValue}}</div>
</div>
Where someValue is just some child key on your ticket object. Or as per your <a> example:
<a href="mailto:{{ cont.selectedTicket.email_address }}?...
Just make sure in your parent controller you create the container variable so the children can reference it:
$scope.cont = {};

Related

How to change the number of rows using a st-template

I've created a st-template that contains specific pagination functionality.
Here is mine the div that calls the st-template:
<div st-pagination="" st-items-by-page="itemsPerPage" st-displayed-pages="7" st-template="dashboard-pagination.html"></div>
Within this pagination we have a dropdown/button where the user can select the number of rows to display within the table.
<ul aria-activedescendant=""
class=""
role="menu"
tabindex="0"
>
<li class="" ng-repeat="page in pages">
<input
id="items-per-page-{{page * 10}}"
name="items-per-page-options"
type="radio"
value=""
role="menuitemradio"
aria-checked="true"
checked
ng-model="itemsPerPage"
>
<label for="items-per-page-{{page * 10}}">
<span class=""></span> {{ page * 10 }}
</label>
</li>
</ul>
So 'itemsPerPage' updates in the template but does not reach the , which is in another html file.
I have been looking for an answer for a few hours and haven't really found one. This is my first experience working with smart-table and angularJS so I may not be using the correct key words.
Any help would be appreciated.
I ended up moving the items per-page html out of the template into the datatable html file. I created an array of static values that represents the number of row to display ['10','20','30','40','50']. Once the user selects one I send in the ng-model itemPerPage and the items update to that selection.
The reason it wasn't working in the template was because of the ng-repeat created a child scope so when I used ng-model it was not modify the original scope.

Using ng-click to show divs in Angular js

So I have a link in an html box and when clicking the link iam trying to have it show a whole new set of divs replacing the present divs.
I tried :
<a href="" ng-click="Search('Show Products A B C')" > Show Products </a>
Search calls in the function in the controller which returns the data for the A B C products, which are then displayed using
<div ng-repeat="products in Search( 'Show Products A B C')" </div>
I am basically trying to do something like this:
<div ng-repeat=" href="" ng-click="Search('Show Products A B C')"> </div>
which is not proper syntax I understand.
But right now nothing happens.
Basically from that ng-click i would like to call that portion of the code (ng-repeat) because right now they are not connected.
thanks
ng-repeat will respond to changes in its argument, but your argument is a function Search(). I would suggest the following:
In your search function:
$scope.Search = function(arg) {
// do your search logic
$scope.productList = <search result list>
}
then in html
<div ng-repeat="products in productList" </div>
What you should do is to have some array or object A bound to $scope, then when you call search you update A and the changes will be reflected on your view
$scope.show=true;
$scope.products =[A,B,C];
$scope.Search = function() {
// do list update
$scope.show=false;
$scope.products =[D,E,F] ;
}
You also need to change ng-repeat to this:
<div ng-repeat="product in products" </div>
And add ng-show to the first link:
Click Me
Edit:
Check this fiddle for a working example.
Edit:
Fiddle updated reflecting latest changes.

VueJS show information in modal based on clicked list entry's index

I am new to vueJS and not sure how to proceed.
I have an array of objects that contain a name and a job position. These objects are shown as a list with a button. When a user clicks the button, a modal pops up that displays the clicked persons name and their job.
How do I get the modal to display the correct info?
<div id="modal">
<h2 class="membername">Name: {{ members[0].name }}</h2>
<p class="memberposition">Position: {{ members[0].position}}</p>
</div>
The '[0]' in the vuejs brackets should be the index of whichever person the user clicked.
http://codepen.io/leetzorr/pen/QGJozR
Create a selectedMember field and let it save the ID. Then base your modal on it and change only the selectedMember-field. I've updated your pen: http://codepen.io/anon/pen/KNrYvz

Most Angular way to add class on click

I'm building an interface with a lot of toggles to control what data is being filtered in a different part of an App's search results. Here is a codepen of it: Here
Coming from a jQuery/Backbone background, what is the most Angular way of toggling the 'active' state of any/all of the filter items? Essentially, almost any <li> tag presented here is a toggle-able feature.
In jQuery, I would put a listener on the view and wait for any click events to bubble up and toggle an 'active' class on the event.target. I want to do it the best way with Angular.
(Also, this is my first Angular project.. I am probably doing all sorts of things the wrong way. Apologies in advance.)
Edit: To clarify the question, I have an App Interface with 20+ possible filter attributes to control a separate module on the page. Every time someone toggles one of these filter attributes, I want to add/remove an 'active' class. Do I put an 'ng-click="function(...)"' in the ng-repeat for each controller? Or is there an easier way to manage this module-wide behavior (a la event bubbling, like in Backbone/jQuery) ?
Thanks!
You can do something like this:
<section ng-init="active = 'areaFoo'">
<div ng-class="{active:active == 'areaFoo'}" ng-click="active = 'areaFoo'"></div>
<div ng-class="{active:active == 'areaBar'}" ng-click="active = 'areaBar'"></div>
</section>
It will populate $scope.active for you, and is very angular as it leverages existing directives, manages the state on scope, and does not leverage dom api's or events outside of directives. There is really no need to involve the controller here, as its display logic.
Learn more about ng-class here.
Multiple active elements
<section>
<div ng-class="{active:areaFoo}" ng-init="areaFoo = true">
<button ng-click="areaFoo = true">activate</button>
<button ng-click="areaFoo = false">de activate</button>
</div>
<div ng-class="{active:areaBar}" ng-init="areaBar = false">
<button ng-click="areaBar = true">activate</button>
<button ng-click="areaBar = false">de activate</button>
</div>
<div ng-class="{active:areaBar}" ng-init="areaBaz = false">
<button ng-click="areaBaz = true">activate</button>
<button ng-click="areaBaz = false">de activate</button>
</div>
</section>
you could also toggle with something like this ng-click="areaFoo = !areaFoo"
I was able to come up with a solution I'm ok with, for anyone curious you can see a demo Here.
Here are the relevant code snippets:
<li ng-repeat='category in data' ng-class='{active: category.isActive}' ng-click='toggleActive(category)' >
<span class='solr-facets-filter-title'>{{category.catTitle}}</span>
<span class='solr-facets-filter-count'>{{category.catResults}}</span>
</li>
An ng-click calls a method on the Controller, toggleActive(category). The current data model gets sent to the method. In the JS:
$scope.toggleActive = function(category){
category.isActive = !category.isActive;
}
The function returns the opposite of the isActive attribute back to the li in question: an ng-class adds the active class for a truthy state of isActive.
I'm not a huge fan of how I have to adjust the data model with flags for active/inactive states like this, but it ends up working out for the best in this case. I can push those isActive states back to the $scope so that other parts of the App can run queries based on that information.

Angularjs appending templates to each other

how to append code to already existing <div ng-view> container.
like I have template with the following code:
<p>{{date}}</p>
<div ng-repeat='i in items'>
<span>{{i.created}}</span>
<span>{{i.order}}</span>
<span>{{i.customer}}</span>
</div>
then by ajax we loading next date items and so on..so how to make the templates to append in the end, not replace each other and look like:
2013-05-03
created
order
customer
created
order
customer
created
order
customer
2013-05-04
created
order
customer
2013-05-05
created
order
customer
created
order
customer
and so on..
?
thank you in advance.
You need to create a parent ng-repeat as follows:
<div ng-repeat="entry in invoices">
<p>{{entry.date}}</p>
<div ng-repeat='i in entry.items'>
<span>{{i.created}}</span>
<span>{{i.order}}</span>
<span>{{i.customer}}</span>
</div>
</div>
Thus, when your server is loading the next date items, simply add the same to invoices array.

Categories