I'm pretty new to AngularJS. I have two tables, one has a list of people that need interviews
// From vol.xslt
<section id="requested_interviews" class="row">
<h3>Unassigned Requests</h3>
<div class="table-responsive">
<table id="unassigned_table" class="table table-condensed">
<tr>
<th>Requested</th>
<th>First</th>
<th>Last</th>
<th>City</th>
<th>Region</th>
<th>Zip</th>
<th>Country</th>
<th>Action</th>
</tr>
<tr ng-repeat="p in prospects">
<td>{{ p.Requested }}</td>
<td>{{ p.First }}</td>
<td>{{ p.Last }}</td>
<td>{{ p.City }}</td>
<td>{{ p.Region }}</td>
<td>{{ p.Zip }}</td>
<td>{{ p.Country }}</td>
<td>
<button class="btn btn-small btn-default btn-block" ng-click="haversine( {{{{p.lat}}}}, {{{{p.lng}}}} )">Find Matches</button>
<button class="btn btn-small btn-default btn-block" ng-click="viewProspectDetais()">Prospect Details</button>
</td>
</tr>
</table>
</div>
When the user clicks the Find Matches button, the haversine function is called, which passes the latitude and longitude of the person into it, and the api responds with volunteers in that person's area:
// From controller
// Volunteer enpoint
$scope.haversine = function(lat, lng) {
$http.get(-- redact api url --).then(function(response) {
$scope.volunteers = response.data.row;
});
};
Now, when the function is triggered, it should update the view, and I think that's what I am having trouble with:
// From vol.xslt
<section id="potential_volunteers" class="row">
<h3>Potential Volunteers</h3>
<table class="table table-hover table-condensed">
<tr>
<th>First</th>
<th>Last</th>
<th>Street</th>
<th>Street 2</th>
<th>Street 3</th>
<th>City</th>
<th>Region</th>
<th>Zip</th>
<th>Country</th>
<th>Action</th>
</tr>
<tr ng-repeat="v in volunteers">
<td>{{ v.First }}</td>
<td>{{ v.Last }}</td>
<td>{{ v.Street_1 }}</td>
<td>{{ v.Street_2 }}</td>
<td>{{ v.Street_3 }}</td>
<td>{{ v.City }}</td>
<td>{{ v.Region }}</td>
<td>{{ v.Postal }}</td>
<td>{{ v.Country }}</td>
<td>
<button class="btn btn-small btn-default btn-block" ng-href="assignInterview()">Assign</button>
<button class="btn btn-small btn-default btn-block" ng-href="viewVolDetails()">Volunteer Details</button>
</td>
</tr>
</table>
I've verified that the endpoint works, and that my variables are showing up correctly within the button (XSLT requires my to use double braces for angular variables).
Thanks!
The answer was to change the start and end symbols for angular variables on the app itself. I guess that XSLT didn't like parsing the {{ and }} characters.
Changing my app declaration to
var app = angular.module('volApp',[]).config(function($interpolateProvider){
$interpolateProvider.startSymbol('[[').endSymbol(']]');
});
and all {{ to [[ and }} to ]] fixed the issue.
Related
In the controller, I receive the data from the database and then I assign the relevant list to the function that will run all the functions in this controller. This list returns to view here I will show the data in the table but ... is undefined error
now i will share with you my functions in controller
public function table_backlog()
{
$dailyData=\DB::table('backlogs')->get()->toArray();
//dd($dailyData);
return ['dailyData'=>$dailyData];
}
protected function getAllBChart() {
return view('deneme',[
'table_backlog'=>$this->table_backlog()]);
}
View.blade:
<div class="row justify-content-center">
<div class="col-auto">
<table class="table table-responsive">
<thead>
<tr>
<th>Incident No</th>
<th>Assignment Group</th>
<th>Open Group</th>
<th>Open Time</th>
<th>RN Short Name</th>
<th>Days</th>
<th>Brief Description</th>
</tr>
<thead>
<tbody>
#foreach($dailyData as $key => $row)
<tr>
<td>{{ $row->number }}</td>
<td>{{ $row->assignmentGroup }}</td>
<td>{{ $row->creatorGroup }}</td>
<td>{{ $row->opened }}</td>
<td>{{ $row->configuration }}</td>
<td>{{ $row->description }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var dailyData={!! json_encode($table_backlog['dailyData']) !!}
</script>
This line assigns the data from the controller to the variable. When I check with DD I can see the data
var dailyData={!! json_encode($table_backlog['dailyData']) !!}
I tried this but I get undefined error. My for loop doesn't work either
try this version coz error from array's key
#foreach($table_backlog['dailyData'] as $key => $row)
<tr>
<td>{{ $row['number']}}</td>
<td>{{ $row['assignmentGroup']}}</td>
<td>{{ $row['creatorGroup']}}</td>
<td>{{ $row['opened']}}</td>
<td>{{ $row['configuration']}}</td>
<td>{{ $row['description']}}</td>
</tr>
#endforeach
I have a table that loops through book objects and writes out values. I want to add buttons to edit and delete the objects. How do I pass parameters correctly to the methods?
So far I have tried this:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">Genre</th>
<th scope="col">ISBN</th>
<th scope="col">UDC</th>
<th scope="col">Publisher</th>
<th scope="col">Year Published</th>
<th scope="col">Shelf Position</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="(book, i) in books" :key="i">
<th scope="row">{{ ++i }}</th>
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
<td>{{ book.genre }}</td>
<td>{{ book.isbn }}</td>
<td>{{ book.udc }}</td>
<td>{{ book.publisher }}</td>
<td>{{ book.year_published }}</td>
<td>{{ book.shelf_position }}</td>
<td><button type="submit" class="btn btn-secondary" v-on:submit="this.edit(book.book_id)">Edit</button></td>
<td><button type="submit" class="btn btn-secondary" onclick="this.delete('{{book.book_id}}')">Delete</button></td>
</tr>
</tbody>
</table>
I have tried two different ways both shown above, but it doesn't work. What am I doing wrong?
When referencing methods/data in templates in vue.js, you don't need to use this - you can refer to it directly by name. You should also be using v-on:click to listen for the events.
So you can change those buttons to:
<td><button type="submit" class="btn btn-secondary" v-on:click="edit(book.book_id)">Edit</button></td>
<td><button type="submit" class="btn btn-secondary" v-on:click="delete('{{book.book_id}}')">Delete</button></td>
This should work as long as edit and delete are defined in your component's methods.
Use the click listener without setting type to submit:
<td><button class="btn btn-secondary" #click="edit(book.book_id)">Edit</button></td>
<td><button class="btn btn-secondary" #click="delete(book.book_id)">Delete</button></td>
Reference: https://v2.vuejs.org/v2/guide/events.html
This my table data in html format:
<table>
<thead>
<form id="filterForm">
</form>
</thead>
<form id="studentsForm">
<tbody>
<tr class="sorted">
<td><span class="selected">WAHEED</span></td>
</tr>
<tr class="sorted">
<td><span class="selected">DON</span></td>
</tr>
<tr class="sorted">
<td><span class="rejected">JACK</span></td>
</tr>
<tr class="sorted">
<td><span class="selected">MARK</span></td>
</tr>
<tr class="sorted">
<td><span class="rejected">GATEES</span</td></tr>
</tbody>
</form>
</table>
This is the sorting javascript after ajax filter response.
var rows = document.querySelectorAll('table tbody tr.sorted');
for (i = 0; i < rows.length; i++) {
if (rows[i].querySelector('span.rejected')) {
rows[i].closest('tbody').appendChild(rows[i]);
}
}
SO when the sorting is done the students will be like this all selected on top and not selected on the bottom:
<tbody>
<tr>
<td><span class="selected">WAHEED</span></td>
</tr>
<tr>
<td><span class="selected">MARK</span></td>
</tr>
<tr>
<td><span class="selected">DON</span></td>
</tr>
<tr>
<td><span class="rejected">JACK</span></td>
</tr>
<tr>
<td><span class="rejected">GATEES</span></td>
</tr>
</tbody>
My issue is when i submit the form data with out soring the data is going fine But when i submit the form with Sort it the serialize of form is not working inside the for i have this feild for every <tr>
<input type="text" class="overrideStudentcomment" name="comment[<?php echo $gdScoreData['student_pid']; ?>]">
I think there is an issue in sorting unable to rectify it. may be the append is being done out side of form
can anyone help me out..?
I usually don't use form inside a table beacuse it will not work. If i want to redirect me somewhere I use the a tag.
Example:
#foreach($data as $card)
<tr style="text-align: center;">
<td>{{ $card -> id }}</td>
<td>{{ $card -> cardType }}</td>
<td>{{ $card -> cardValue }} RON</td>
<td>{{ $card -> createdBy }}</td>
<td>{{ $card -> created_at }}</td>
<td>
<form action="to somewhere">
<button type="submit">Submit</button>
</form>
</td>
#endforeach
Instead of this, use this :
#foreach($data as $card)
<tr style="text-align: center;">
<td>{{ $card -> id }}</td>
<td>{{ $card -> cardType }}</td>
<td>{{ $card -> cardValue }} RON</td>
<td>{{ $card -> createdBy }}</td>
<td>{{ $card -> created_at }}</td>
<td>
<a class="icon pencil-lg-icon" href="{{ route ( 'admin.catalog.giftcards.edit', $card->id ) }}" style="color: white; padding: 8px 10px;"></a>
<a class="icon trash-icon" href="{{ route ( 'admin.catalog.giftcards.delete', $card->id ) }}" style="color: white; padding: 8px 10px;"></a>
</td>
#endforeach
Or you can try this
#foreach($data as $card)
// Outside the table
<form action="to somewhere" id="idform"></form>
<tr style="text-align: center;">
<td>{{ $card -> id }}</td>
<td>{{ $card -> cardType }}</td>
<td>{{ $card -> cardValue }} RON</td>
<td>{{ $card -> createdBy }}</td>
<td>{{ $card -> created_at }}</td>
<td>
<button type="submit" form="idform">Submit</button>
</td>
#endforeach
I hope i helped you.
i am newbie at AngularJS and in now trying to learn it. This time i am learning how to create one page app using codeigniter and angular with RESTful lib.
I have JSON like this :
[{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]
i just cannot fetch it to $scope with ng-repeat working no matter what i do. This is my function :
$http.get('Api/items').then(function(response)
{
$scope.items = response;
console.log(response);
});
and this is my table view :
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x.title }}</td>
<td>{{ x.description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
This is what happen when those all executed :
no array fetched by $scope at all. weird thing is the <tr> is repeated 5 time without any value. but when i call array[0] the $scope can fetch it :
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th>No</th>
<th>Title</th>
<th>Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x[0].title }}</td>
<td>{{ x[0].description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
Where did i go wrong?? can someone help me??
It is because the promise returning raw HTTP response from the server rather than parsed result data. You should try this instead :
$http.get('Api/items').then(function(response)
{
$scope.items = response.data;
console.log(response);
});
#digit already pointed the issue in you $hhtp call. Now For this JSON:
[{"id":"25","title":"abc","description":"sss"},{"id":"26","title":"sd","description":"sdsd"}]
.
No need to give index number inside ng-repeat. //{{ x[0].title }}
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td>{{ x.title }}</td>
<td>{{ x.description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(x.id)" data-target="#edit-data" class="btn btn-primary">Edit</button>
<button ng-click="remove(x,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
I have a table that lists several objects in an array using ng-repeat and I was wondering, if there is an easy way to let the user select one of these objects by clicking on the row and viewing them in a separate <div>.
Here's the table:
<table class="table">
<tbody class="table-hover">
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Approver</th>
</tr>
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
</tbody>
</table>
Let's say the user clicked on the first row. He would now see a <div> that contains all the information in this row for that object.
<div>
{{campaigns[].name}}
...
</div>
It could be achieved by several way. One of them as below.
<table class="table">
<tbody class="table-hover">
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Approver</th>
</tr>
<tr ng-repeat-start="campaign in campaigns | filter: query" contenteditable="true" ng-click="campaign.showDetails = !campaign.showDetails">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
<tr ng-repeat-end ng-show="campaign.showDetails">
Your can dispalay here rest of the information from campaign object.
</tr>
</tbody>
You could seed the example http://codepen.io/anon/pen/beNbwp
Ok, so if I understand your problem, the solution could be to use ng-click :
(considering campaign.name unique for each campaigns)
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true" ng-click="doSmth(campaign.name)">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
Then in your controller :
$scope.doSmth = function(campName) {
$state.go(campName); //example
};
Another solution, using ui-sref :
Considering you define a url: '/folder/campaignPage?name' in your $stateProvider.
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true" ui-sref="campaignPage({ name: campaign.name })">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
Another way u can do it easily if u also create a button in ng-repeat like
<td><input type="button" value="select" class="btn btn-info btn-sm" ng-click="populate(campaign )" /></td>
And then
$scope.populate = function (campaign) {
$scope.Name = campaign.Name;
}
It's simple to use.