Allow me to begin by saying that I am a C++ developer by profession and have extremely poor javascript skills, so please forgive me if this is a basic question. What I am trying to do is take a string being generated from an Angular binding and pass it to a function in javascript. I have included an example below. Note that I am trying to pass {{x.VodName}} to the function called "MyFunction(vodName)". Thanks in advance!
<tr ng-repeat="x in names">
<td><a id="myLink" href="#" onclick="MyFunction({{ x.VodName }});">{{ x.VodName }}</a></td>
<td>{{ x.Stream }}</td>
<td>{{ x.ReplayTime }}</td>
<td>{{ x.Duration }}</td>
<td>X</td>
<script>
function MyFunction(vodName)
{
window.alert(vodName);
}
In your template you can give an variable to a function by just giving it to the function. And instead of onclick you should use ng-click
<tr ng-repeat="x in names">
<td><a id="myLink" href="#" ng-click="MyFunction(x.VodName);">{{ x.VodName }}</a></td>
<td>{{ x.Stream }}</td>
<td>{{ x.ReplayTime }}</td>
<td>{{ x.Duration }}</td>
<td>X</td>
</tr>
For you function in the controller it can be important to know the difference between var MyFunction = function(name){} and function MyFunction(name){}. For more about this, look here
try something like this, where your controller could look like:
<script>
var vapp = angular.module("vapp", []);
vapp.controller("videoController", ["$scope", function($scope){
$scope.names = [];
$scope.play = function(files){
alert(files.VodName);
};
}]);
</script>
and your html:
<table ng-controller="videoController">
<tr ng-repeat="x in names">
<td><a id="myLink" href="#" ng-click="play(x);">{{ x.VodName }}</a></td>
<td>{{ x.Stream }}</td>
<td>{{ x.ReplayTime }}</td>
<td>{{ x.Duration }}</td>
<td>X</td>
</tr>
</table>
Related
I'm in Vue2 and I have a table, created by a v-for, with the rows that have a class of "included" or "allResults", based on a condition.
I need to show/hide only the table rows with a class of "included" when I trigger a switch (dataShow) that has a value of all or selected.
I've written a simple method for that but I would like to implement this function directly in the vue template, checking if every table row has a class of selected and hide it.
thanks in advance for help
<input v-model="dataShow" true-value="selected" false-value="all" type="checkbox" name="Show all or selected" />
<tbody>
<tr v-for="(comparable, index) in sortedSelectedComparables" :class="watchedProperty.map(el => el.idorg).includes(comparable.idorg) ? 'included' : 'allResults'">
<td>{{ Math.round(comparable.distance) + 'm'}}</td>
<td>{{ comparable.address }}</td>
<td>{{ comparable.startdate }}</td>
<td>{{ comparable.usedetail_en }}</td>
</tr>
</tbody>
How about using v-if or v-show to toggle the rows?
If dataShow is false, show all rows
or, if dataShow is true, show only the rows listed in watchedProperty
<tbody>
<tr v-for="(comparable, index) in sortedSelectedComparables" v-if="!dataShow || watchedProperty.map(el => el.idorg).includes(comparable.idorg)">
<td>{{ Math.round(comparable.distance) + 'm'}}</td>
<td>{{ comparable.address }}</td>
<td>{{ comparable.startdate }}</td>
<td>{{ comparable.usedetail_en }}</td>
</tr>
</tbody>
If you'd like to use class to toggle the visibility, you need to set css. Something like this...
<table :class="{'showAll': !dataShow}">
<tbody>
<tr v-for="(comparable, index) in sortedSelectedComparables" v-if="!dataShow || watchedProperty.map(el => el.idorg).includes(comparable.idorg)">
<td>{{ Math.round(comparable.distance) + 'm'}}</td>
<td>{{ comparable.address }}</td>
<td>{{ comparable.startdate }}</td>
<td>{{ comparable.usedetail_en }}</td>
</tr>
</tbody>
</table>
<style scoped lang="scss">
table.showAll td:not(.included) {
display: none;
}
</style>
I cannot search using ajax, that is my problem. I need to search without refreshing.
Here is my controller code; am I missing something here?
public function search(Request $request){
if($request->ajax())
{
$employees = DB::table('employeefms')->where('last_name','LIKE','%'.$request->search.'%')
->orWhere('first_name','LIKE','%'.$request->search.'%')->get();
return response();
}
}
Here is my view. I know I have a lot of fields in here! Please check if I'm missing something:
#foreach ($employees as $employee)
<tbody>
<tr>
<td>{{ $employee->employee_no}}</td>
<td>{{ $employee->last_name}}</td>
<td>{{ $employee->first_name}}</td>
<td>{{ $employee->middle_name}}</td>
<td>{{ $employee->nick_name}}</td>
<td>{{ $employee->gender}}</td>
<td>{{ $employee->birthdate }}</td>
<td>{{ $employee->age}}</td>
<td>{{ $employee->birthplace}}</td>
<td>{{ $employee->province}}</td>
<td>{{ $employee->doMarriage}}</td>
<td>{{ $employee->height}}</td>
<td>{{ $employee->weight}}</td>
<td>{{ $employee->bloodtype}}</td>
<td>{{ $employee->nationality }}</td>
<td>{{ $employee->religion}}</td>
<td>{{ $employee->civil_stats}}</td>
<td>{{ $employee->sss_no}}</td>
<td>{{ $employee->tin_id}}</td>
<td>{{ $employee->phil_no}}</td>
<td>{{ $employee->pagibig_no}}</td>
<td>{{ $employee->address_no}}</td>
<td>{{ $employee->street_no}}</td>
<td>{{ $employee->brgy}}</td>
<td>{{ $employee->municipality}}</td>
<td>{{ $employee->cur_province}}</td>
<td>{{ $employee->region}}</td>
<td>{{ $employee->zipcode}}</td>
<td>{{ $employee->per_address_no}}</td>
<td>{{ $employee->per_street_no}}</td>
<td>{{ $employee->per_brgy}}</td>
<td>{{ $employee->per_municipality}}</td>
<td>{{ $employee->per_province}}</td>
<td>{{ $employee->per_region}}</td>
<td>{{ $employee->per_zipcode}}</td>
<td>{{ $employee->mobile_no}}</td>
<td>{{ $employee->tel_no}}</td>
<td>{{ $employee->email_ad}}</td>
<td>{{ $employee->guard_name}}</td>
<td>{{ $employee->guard_add}}</td>
<td>{{ $employee->guard_relat}}</td>
<td>{{ $employee->grd_mobile_no}}</td>
<td><i class="fa fa-edit"></i></td>
<td>
{!!Form::open(['action'=>['Admin\EmployeeFilemController#destroy', $employee->id],'method'=>'POST', 'align'=>'right'])!!}
{{Form::hidden('_method', 'DELETE')}}
{{Form::button('<i class="fa fa-trash"></i>',['type' => 'submit','class' => 'btn btn-sm btn-danger'])}}
{!!Form::close()!!}
</td>
</tr>
</tbody>
#endforeach
My AJAX:
<script type="text/javascript">
$('#search').on('keyup',function(){
$value=$(this).val();
$.ajax({
type : 'get',
url : '{{ URL::to('admin/employeemaintenance/search') }}',
data : {'search':$value},
success:function(data){
var data1 = jQuery.parseJSON(data);
if(data1.msg == "success"){
$.each(eval(data1.data), function(){
$('tbody').html(data);
})
},
//no data found
}
});
})
</script>
You have to make two improvements in your code as
1) either you need to turn off the CSRF protection for your route or pass "_token": "{{ csrf_token() }}" parameter with your data
2) you are returning response(), which doesn't make sense return $employees instead of that
I am able to show all data from my products record in Firebase DB, what i want now is to delete a certain record that i select.
I got a bit of the documentation of Firebase but i'm not so good with VueJs, although i think this is more of a JavaScript problem.
What i get on my console when i click the delete link is:
Error: Firebase.child failed: First argument was an invalid path:
"undefined". Paths must be non-empty strings and can't contain ".",
"#", "$", "[", or "]"
Here is my code:
<template>
<tbody v-for="(key, value, index) in products">
<tr v-for="k, val in key">
<td>{{ k.name }}</td>
<td>{{ k.description }}</td>
<td>{{ k.oldPrice }}</td>
<td>{{ k.price }}</td>
<td>{{ k.prodId }}</td>
<td>{{ k.sellerName }}</td>
<td><span class="glyphicon glyphicon-trash btn-delete-style" v-on:click="removeProduct(k)" title="Delete Product"></span></td>
</tr>
</tbody>
</template>
<script>
removeProduct: function (product) {
console.log("Product:" + product);
productsRef.child(product['.key']).remove();
toastr.success("Product deleted successfully");
}
</script>
Below you can see my DB:
Any help is appreciated, Thank you.
You need to reference first to that record and then call the remove function, here is an example:
<template>
<tbody v-for="(key, value, index) in products">
<tr v-for="k, val in key">
<td>{{ k.name }}</td>
<td>{{ k.description }}</td>
<td>{{ k.oldPrice }}</td>
<td>{{ k.price }}</td>
<td>{{ k.prodId }}</td>
<td>{{ k.sellerName }}</td>
<td><span class="glyphicon glyphicon-trash btn-delete-style" v-on:click="removeProduct(k, k.sellerId, k.prodId)" title="Delete Product"></span></td>
</tr>
</tbody>
</template>
<script>
removeProduct: function (product, sellerID, prodId) {
var currentRef = db.ref('products/' + sellerID + '/' + prodId);
currentRef.remove();
toastr.success("Product deleted successfully");
}
</script>
I think you should take product id from prodid
productsRef.child(product['prodid']).remove()
I want to search in column name or number only, currently i'm only searching in column name.
<input type="text" ng-model="test.name" placeholder="start typing..">
my expressions,
<tr ng-repeat="x in names | filter:test | limitTo:totalDisplayed">
<td>{{ x.name }}</td>
<td>{{ x.number}}</td>
<td>{{ x.city }}</td>
<td>{{ x.country }}</td>
</tr>
Create a custom filter to accomplish this.
html
<input type="text" ng-model="test.name" placeholder="start typing..">
<tr ng-repeat="x in names | myFilter: test">
<td>{{ x.name }}</td>
<td>{{ x.number}}</td>
<td>{{ x.city }}</td>
<td>{{ x.country }}</td>
</tr>
js filter
angular.module('myApp').filter('myFilter', function () {
return function (list, input) {
//input is test object and list is your current array you want to return a filtered array
var myArray = [];
list.forEach(function(o, i){
if(o.name.indexOf(input.name) > -1 || o.number.indexOf(input.name) > -1 )
myArray.push(o);
});
return myArray
};
});
iam trying to get the code in a Element Template:
rent.html
<td>{{ rent.id }}</td>
<td>{{ rent.auto }}</td>
<td>{{ rent.person }}</td>
<td>{{ rent.title }}</td>
<td>{{ rent.start }}</td>
<td>{{ rent.end }}</td>
<td><a ng-href="#" ng-click="acceptRent(rent.id)"><img src="bundles/chriskfzbuchung/images/accept.png" width="15" ng-hide="rent.buchungsStatus == 1"></a></td>
<td><a ng-href="#" ng-click="declineRent(rent.id)"><img src="bundles/chriskfzbuchung/images/decline.png" width="15" ng-hide="rent.buchungsStatus == 2"></a></td>
controller.js
kfzModule.directive("kfzRent", function(){
return {
restrict: 'E',
templateUrl: '/kfz-buchung/rent.html'
};
});
overview.html
<tr kfz-rent ng-repeat="rent in rents" ng-class="{'success' : rent.buchungsStatus == 1, 'danger' : rent.buchungsStatus == 2}">
</tr>
I dont know how to deal with the rest in overview.html.
I finally want just an <kfz-rent></kfz-rent>.
Thanks!
This should work:
<kfz-rent ng-repeat="rent in rents" ng-class="{'success' : rent.buchungsStatus == 1, 'danger' : rent.buchungsStatus == 2}">
<td>{{ rent.id }}</td>
<td>{{ rent.auto }}</td>
<td>{{ rent.person }}</td>
<td>{{ rent.title }}</td>
<td>{{ rent.start }}</td>
<td>{{ rent.end }}</td>
<td><a ng-href="#" ng-click="acceptRent(rent.id)"><img src="bundles/chriskfzbuchung/images/accept.png" width="15" ng-hide="rent.buchungsStatus == 1"></a></td>
<td><a ng-href="#" ng-click="declineRent(rent.id)"><img src="bundles/chriskfzbuchung/images/decline.png" width="15" ng-hide="rent.buchungsStatus == 2"></a></td>
</kfz-rent>
The code for ng-repeat seems to be fine. But you have to create the array in your controller:
$scope.rents = [];
Dont forget to make a alias for your controller
kfzModule.directive("kfzRent", function(){
return {
restrict: 'E',
templateUrl: '/kfz-buchung/rent.html'
};
},
controllerAs: 'rentController'
};
});
Cheers,
Valentin