Have a problem with total count of ajax searche's results.
There is a mistake "Method Illuminate\Database\Eloquent\Collection::total does not exist." if I use directive for example
<div class="searched-item">
{{ __('main.res_found') }} {{$sfilms->total()}} {{ __('main.res_results') }}
</div>
How to fix it correctly?
blade template:
#if($sfilms)
#if($sfilms->count())
<div class="searched-item">
{{ __('main.res_found') }} {{$sfilms->count()}} {{ __('main.res_results') }}
</div>
#else
<div class="searched-item">
{{ __('main.res_found') }} 0 {{ __('main.res_results') }}
</div>
#endif
#foreach($sfilms as $sfilm)
<div class="search-hits">
<ol class="search-hits-list">
<li class="search-hits-item">
<a href="{{ url('films/'.$sfilm->film_id) }}">
<div class="search-img-wrapper">
#if(!is_null($sfilm->films->poster))
<img src="{{$sfilm->films->poster}}" alt="poster" class="news_movies-img">
#else
{{-- <img class="news_movies-img" src="{{ url('/img/no_poster.jpg') }}" alt="poster"/>--}}
<img src="{{asset('storage/poster/' . $sfilm->films->id . '.jpg')}}" alt="poster" class="news_movies-img">
#endif
</div>
<div class="search-hits-wrapper">
<div class="hit-title">
<h3>{{ $sfilm->title }}</h3>
</div>
<div class="hit-title">
<h4>{{ $sfilm->films->orig_title }}</h3>
</div>
<span>
<p class="poster_genre-link">{{ $sfilm->films->country}} {{ $sfilm->films->year }}</p>
</span>
<span>
<p class="poster_genre-link">For age {{ $sfilm->films->age }} +</p>
</span>
</div>
</a>
</li>
</ol>
</div>
#endforeach
#else
<li class="list-group-item">{{ __('search_no_results') }}</li>
#endif
javascript ajax code:
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#search').keyup(function() {
var search = $('#search').val();
if (search == "") {
$("#memlist").html("");
$('#result').hide();
} else {
$.get("{{ URL::to('/search') }}", {
search: search
}, function(data) {
$('#memlist').empty().html(data);
$('#result').show();
})
}
});
});
Controller:
public function search(Request $request) : View
{
$search = $request->input('search');
$locales = app()->getLocale();
if ($locales == NULL) {
$sfilms = Local::where('title_en', 'like', "%$search%")
->orWhere('year', 'like', "$search%")->limit(4)->get();
} else {
$sfilms = Local::where('title' . '_' . $locales, 'like', "%$search%")
->orWhere('year', 'like', "$search%")->limit(4)->get();
}
return view('layouts.found')->with('sfilms', $sfilms);
}
This works correctly with searched results and I see them, but I don't fix to see exactly count of total results from request.
Collection use the count() method to return the total.
So you should be using it like this instead
{{ $sfilms->count() }}
Done
Just replace in controller ->limit(4)->get() to ->paginate(4). According to documentation
public function search(Request $request) : View
{
$search = $request->input('search');
$locales = app()->getLocale();
if ($locales == NULL) {
$sfilms = Local::where('title_en', 'like', "%$search%")
->orWhere('year', 'like', "$search%")->paginate(4);
} else {
$sfilms = Local::where('title' . '_' . $locales, 'like', "%$search%")
->orWhere('year', 'like', "$search%")->paginate(4);
}
return view('layouts.found', ['sfilms'=>$sfilms]);
}
Related
I'm working on a Laravel project where user can favorite and unfavorite books, in the two cases the DB changes successfully without page reloading as i used ajax , but i have two problems:
-first problem : if there is no favorite books, favorite button disappears and i need to edit database to add some book to favorites table and show the button again.
- second problem is that when more than one book is favorited when i refresh the page, the favorite button is duplicated .
here is the code in my controller:
class FavoriteController extends Controller
{
public function bookFavBook(Request $request){
$book_id = $request['bookid'];
$fav = DB::table('favorites')
->where('book_id', $book_id)
->where('user_id', Auth::user()->id)
->first();
check if books fav or unfav
if(!$fav){
$newfav = new Favorite;
$newfav->book_id =$book_id;
$newfav->user_id = Auth::user()->id;
$newfav->fav = 1;
$newfav->save();
to use in ajax
$is_fav = 1;
}
elseif ($fav->fav == 1){
DB::table('favorites')
->where('book_id', $book_id)
->where('user_id', Auth::user()->id)
->delete();
$is_fav = 0;
}
elseif ($fav->fav == 0){
DB::table('favorites')
->where('book_id', $book_id)
->where('user_id', Auth::user()->id)
->update(['fav'=> 1] );
$is_fav = 1;
}
$response = array(
'is_fav'=>$is_fav,
);
return response()->json($response, 200);
}
and the code in my view :
first loop
#foreach( $books as $book)
<div class="container-fluid column">
<div class="row flex-row flex-nowrap">
<div class="col-md-4">
<div class="card card-block">
<div>
<img
class="card-img-top"
src="/images/{{ $book-> book_img}}"
alt="Card image cap"
/>
</div>
<h5 class="card-title"> {{ $book ->title}} </h5>
<p class="card-text">
{{ $book-> description}}
</p>
<div class="card">
<div class="mb-3">
<span class="badge badge-pill badge-primary p-2 mr-4">
<span class="count_of_book">{{ $book-> amount }}</span>
copies available
</span>
query books from favorites table
#php
$getbook = DB::table('books')
->join('favorites','favorites.book_id','=', 'books.id' )
->where('favorites.user_id','=',Auth::id())
->get();
#endphp
socond loop
#foreach($getbook as $fbook)
**#if($fbook->book_id == $book->id )
<i id="favorite" data-bookid="{{ $book-> id }}" class="fas fa-heart fa-2x text-danger"></i>
#else
<i id="favorite" data-bookid="{{ $book-> id }}" class="fas fa-heart fa-2x text-dark"></i>
#endif**
end second loop
#endforeach
</div>
</div>
end first loop
#endforeach
</div>
{{ $books->links() }}
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var token = '{{ Session::token()}}';
var urlFav = '{{ route('favor') }}';
</script>
and the ajax code in js file:
$(".fa-heart").on("click", function (event){
bookid = $(this).data("bookid");
$.ajax({
method: 'POST',
url: urlFav,
data: {bookid: bookid , _token:token},
success: function(data){
if(data.is_fav == 1){
$(event.target).removeClass("text-dark").addClass("text-danger");
}
if(data.is_fav == 0){
$(event.target).removeClass("text-danger").addClass("text-dark");
}
}
});[show duplication of the buuton][1]
[1]: https://i.stack.imgur.com/551I4.png
Don't perform a join query, instead fetch books first then inside your for loop check whether the books are present in the favorite table . If they are present and are favorite than show that they are favorite else show that they are not favorite.
#php
$getbook = DB::table('books')->get();
#endphp
#foreach($getbook as $fbook)
#php
$fav = DB::table('favorites')->where(['book_id' => $fbook->id])->get();
#endphp
#if($fav != null && $fav->is_fav == 1)
<i id="favorite" data-bookid="{{ $book-> id }}" class="fas fa-heart fa-2x text-danger"></i>
#else
<i id="favorite" data-bookid="{{ $book-> id }}" class="fas fa-heart fa-2x text-dark"></i>
#endif
#endforeach
Basically, if I try to pause the carousel programatically it won't work on mobile browsers, it works fine on desktop.
so something like:
$('.carousel').carousel('pause');
won't take any effect on the carousel itself, it keeps cycling through images.
Also tried:
$('.carousel').carousel({
interval: false
});
Then combined it with pause as well with no effect whatsoever.
Is there any particular issue with this or a way to fix it?
Thanks in advance.
Edit: this is the whole code:
$(document).ready(function () {
$('.carousel-indicators').scrollLeft(0);
$('#sme-directory-gallery').carousel('cycle');
$('.video-mask').click(function () {
var iframe = $(this).closest('.item').find('iframe');
var iframe_source = iframe.attr('src');
iframe_source = iframe_source + "?autoplay=1"
iframe.attr('src', iframe_source);
$(this).toggle();
$('#sme-directory-gallery').carousel();
});
$('#sme-directory-gallery').on('slide.bs.carousel', function (e) {
$('#sme-directory-gallery').carousel('cycle');
var iframeID = $(this).find('iframe').attr('id');
if (iframeID != undefined) {
callPlayer(iframeID, 'stopVideo');
}
$('.video-mask').show();
$('#sme-directory-gallery').find('iframe').each(function (key, value) {
var url = $(this).attr('src');
if (url.indexOf('autoplay') > 0) {
var new_url = url.substring(0, url.indexOf('?'));
$(this).attr('src', new_url);
}
});
setTimeout(() => {
var scrollTo = $('.list-inline-item.active').position().left;
if ($('.list-inline-item.active').index() > 0) {
scrollTo = $('.list-inline-item.active').prev('.list-inline-item').position().left;
}
var finalOrFirst = 0;
if (e.direction === 'right') {
if ($('.list-inline-item.active').is(':last-child')) {
finalOrFirst = 99999;
}
} else {
if ($('.list-inline-item.active').is(':first-child')) {
finalOrFirst = -99999;
}
}
var currentScroll = $('.carousel-indicators').scrollLeft();
var scrollResult = currentScroll + scrollTo + finalOrFirst;
$('.carousel-indicators').animate({scrollLeft: scrollResult}, 500);
}, 10);
});
});
Edit 2: this is the html, or blade rather:
<div class='card-body text-center sme-directory-card-body sme-directory-gallery'>
<div id='slider'>
<div id='sme-directory-gallery' class='carousel slide'>
<div class='carousel-inner'>
#foreach($directoryInfo->videos as $index => $video)
<div class='item carousel-item {{ $index === 0 ? 'active' : '' }}' data-slide-number='{{ $index }}'>
<div class='video-mask'></div>
<div class='d-flex justify-content-center'>
<div class='embed-responsive embed-responsive-21by9'>
<iframe class='embed-responsive-item player' src='{{ 'https://www.youtube.com/embed/' . substr($video->url, strrpos($video->url, 'v=') + 2) . '?rel=0' }}' allowfullscreen></iframe>
</div>
</div>
</div>
#endforeach
#foreach($directoryInfo->images as $index => $image)
<div class='item carousel-item {{ ($index + sizeof($directoryInfo->videos)) === 0 ? 'active' : '' }}' data-slide-number='{{ $index + sizeof($directoryInfo->videos) }}'>
<div class='d-flex justify-content-center'>
<img src='{{ asset('storage/' . $image->path) }}' class='img-fluid' alt='imagen'>
</div>
</div>
#endforeach
<a class='carousel-control-prev' href='#sme-directory-gallery' role='button' data-slide='prev'>
<div class='rounded-circle'>
<span class='carousel-control-prev-icon' aria-hidden='true'></span>
<span class='sr-only'>Previous</span>
</div>
</a>
<a class='carousel-control-next' href='#sme-directory-gallery' role='button' data-slide='next'>
<div class='rounded-circle'>
<span class='carousel-control-next-icon' aria-hidden='true'></span>
<span class='sr-only'>Next</span>
</div>
</a>
</div>
<ul class='carousel-indicators list-inline'>
#foreach($directoryInfo->videos as $index => $video)
<li class='list-inline-item my-2 {{ $index === 0 ? 'active' : '' }}'>
<a id='carousel-selector-{{ $index + sizeof($directoryInfo->videos) }}' class='sme-gallery-anchor' data-slide-to='{{ $index }}' data-target='#sme-directory-gallery'>
<img src='{{ 'https://img.youtube.com/vi/' . substr($video->url, strrpos($video->url, 'v=') + 2) . '/mqdefault.jpg' }}' class='img-fluid'>
<div class='text-white sme-gallery-middle-icon'>
<span class='fas fa-play'></span>
</div>
</a>
</li>
#endforeach
#foreach($directoryInfo->images as $index => $image)
<li class='list-inline-item {{ $index + sizeof($directoryInfo->videos) === 0 ? 'active' : '' }}'>
<a id='carousel-selector-{{ $index + sizeof($directoryInfo->videos) }}' data-slide-to='{{ $index + sizeof($directoryInfo->videos) }}' data-target='#sme-directory-gallery'>
<img src='{{ asset('storage/' . $image->path) }}' class='img-fluid'>
</a>
</li>
#endforeach
</ul>
</div>
</div>
</div>
I am creating commenting system.
And I integrated vue.js in my laravel project.
In my comment area, I want to show user profile image in my laravel
public folder.
But I have no idea how to show image.
What I want to achieve is,
if user has a profile image, I want to show it in comment area. But if
user doesn't have a profile image, I want to show an avatar.
I used vue avatar component so I think I want to use it.
My profile images are stored in public/uploads/profile.
comment.vue
<template>
<div>
<div class="reply-comment" >
<div class="user-comment">
<div class="user">
<!---<img src="{{ $comment->user->img }}" class="image-preview__image">--->
<avatar :username="comment.user.name" :size="45"></avatar>
</div>
<div class="user-name">
<span class="comment-name"><a :href=" '/user/' + 'profile' +'/'+ comment.user.id + '/' ">{{ comment.user.name }}</a></span>
<p>{{ comment.body }}</p>
</div>
</div>
</div>
<div class="reply">
<button #click="addingReply = !addingReply" class="reply-button" :class="{ 'red' : !addingReply, 'black' : addingReply }">
{{ addingReply ? 'Cancel' : 'Add Reply'}}
</button>
</div>
<div class="user-reply-area" v-if="addingReply">
<div class="reply-comment">
<input v-model='body' type="text">
</div>
<button #click="addReply" class="comment-button"><span>Add Reply</span></button>
</div>
<replies ref='replies' :comment="comment"></replies>
</div>
</template>
<script>
import Avatar from 'vue-avatar'
import Replies from './replies.vue'
export default {
components: {
Avatar,
Replies
},
data() {
return {
body: '',
addingReply: false
}
},
props: {
comment: {
required: true,
default: () => ({})
},
post: {
required: true,
default: () => ({})
}
},
methods: {
addReply() {
if(! this.body) return
axios.post(`/comments/${this.post.id}`, {
comment_id: this.comment.id,
body: this.body
}).then(({data})=> {
this.body = ''
this.addingReply = false
this.$refs.replies.addReply(data)
})
.catch(function (error) {
console.log(error.response);
});
}
}
}
</script>
profile.php
public function user(){
return $this->belongsTo(User::class, 'user_id');
}
user.php
public function profile(){
return $this->hasOne(Profile::class);
}
public function comments()
{
return $this->hasMany(Comment::class);
}
comment.php
protected $with = ['user'];
protected $appends = ['repliesCount'];
web.php
Route::get('results/{post}/comments', 'CommentController#index');
If your database column name for the image file is img then
you can do it like below:
<div class="user" v-if="comment.user.img">
<img :src="'uploads/profile/'+comment.user.img">
</div>
<div class="user" else>
<img :src="default_image_path_here">
</div>
If you are using multiple images for a user you need to add a loop as follow:
<div class="user" v-if="comment.user.img.length > 0">
<span v-for="(item, index) in comment.user.img">
<img :src="'uploads/profile/'+item.your_image_name_column">
</span>
</div>
<div class="user" else>
<img :src="default_image_path_here">
</div>
I am currently working on ajax, jquery and javascript. I have slight problems with it.
I can use this code to send the data and they are stored in the database.
But the data will not be displayed directly after sending in the view, until I have reloaded the page.
How can I output the data directly in the view without reloading the page?
How can I output errors and success messages as flashmessage (toastr) message?
how can I rewrite this code that works? I get the error message that it is a duplicate of the selectors.
$('#todolist-create-modal').modal('hide');
$('#todolist-create-modal').on('keypress', ":input:not(textarea)", function(event) {
return event.keyCode != 13;
});
Code
<script type="application/javascript">
$(document).ready(function () {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$('#add-todo-list').click(function(e) {
e.preventDefault();
var _token = $("input[name='_token']").val(); // get csrf field.
var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();
var privacy = $("select[name='privacy']").val();
var listid = $("select[name='privcy']").val();
$.ajax({
url:'{{ route('todolists.store') }}',
type: 'POST',
data: {_token:_token, title:title, description:description, privacy:privacy},
success: function (data) {
console.log(data);
if (privacy = 0) {
//go to the left side
} else {
//go to the right side
}
},
error: function(data){
console.log(data);
}
});
$('#todolist-create-modal').modal('hide');
$('#todolist-create-modal').on('keypress', ":input:not(textarea)", function(event) {
return event.keyCode != 13;
});
});
});
</script>
view
<div id="content" class="dashboard padding-10">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<a data-toggle="modal" data-target=".todolist-create-modal" class="btn btn-success btn-block btn-sm margin-bottom-10">Neue Liste erstellen</a>
</div>
<div class="col-md-6">
<div id="panel-misc-portlet-l3" class="panel panel-default text-center">
<div class="panel-heading nohover">
<span class="elipsis">
<strong>Öffentliche Tasks</strong>
</span>
</div>
</div>
<div class="alert alert-danger margin-bottom-30 {{ $todolistpublic->count() ? 'hidden' : '' }}">
Es wurden keine <strong>Einträge</strong> gefunden.
</div>
#foreach ($todolistpublic as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden">
<i class="fa fa-plus"></i> Erstellen
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-info btn-xs white hover-hidden">
<i class="fa fa-edit"></i> Bearbeiten
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-delete-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-danger btn-xs white hover-hidden">
<i class="fa fa-times"></i> Löschen
</a>
</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
<div class="panel-footer mtm-10">
<span id="todo-list-counter-public">{{ $todolistpublic->count() }}</span> <span>{{ $todolistpublic->count() > 1? 'Listen' : 'Liste' }}</span>
</div>
</div>
<div class="col-md-6">
<div id="panel-misc-portlet-l3" class="panel panel-default text-center">
<div class="panel-heading nohover">
<span class="elipsis">
<strong>Private Tasks</strong>
</span>
</div>
</div>
<div class="alert alert-danger margin-bottom-30 {{ $todolistprivate->count() ? 'hidden' : '' }}">
Es wurden keine <strong>Einträge</strong> gefunden.
</div>
#foreach ($todolistprivate as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden"><i class="fa fa-plus"></i> Erstellen</a></li>
<li><a data-toggle="modal" data-target=".todolist-modal" class="btn btn-info btn-xs white hover-hidden"><i class="fa fa-edit"></i> Bearbeiten</a></li>
<li><i class="fa fa-times"></i> Löschen</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
<div class="panel-footer mtm-10">
<span id="todo-list-counter-private">{{ $todolistprivate->count() }}</span> <span>{{ $todolistprivate->count() > 1? 'Listen' : 'Liste' }}</span>
</div>
</div>
#include('elements.addTodoList')
#include('elements.createTodoList')
#include('elements.addTask')
</div>
</div>
Controller
public function store(Request $request)
{
$validator = Validator::make($request->all(), [
'title' => 'required|min:5',
'description' => 'required|min:10',
'privacy' => 'required|integer'
]);
$attributeNames = array(
'title' => 'Title',
'description' => 'Description',
);
$validator->setAttributeNames($attributeNames);
//Redirect back if validation fails
if($validator->fails()) {
return response()->json(['error'=>$validator->errors()->all()]);
}
else{
$todolists = new Todolists();
$todolists->admin_id = Auth::id();
$todolists->title = $request->title;
$todolists->description = $request->description;
$todolists->privacy = $request->privacy;
$todolists->save();
return response()->json(['Your enquiry has been successfully submitted!']);
}
}
EDIT
I have revised and adapted the code. Currently I have two more problems:
The flashmessage is only output as 'empty'. Without text content. Where is the problem?
The div is also reloaded. But after it was loaded I can not send the same request again. Do I have to reset something or what is the error?
When I issue the errors in the console with console.log(data); I get the following error messages:
{error: Array(2)}
error
:
(2) ["The Title ist erforderlich.", "The Description ist erforderlich."]
<script type="application/javascript">
$(document).ready(function () {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$('#add-todo-list').click(function(e) {
e.preventDefault();
$('.todolist-create-modal').on('keypress', ":input:not(textarea)", function(event) {
return event.keyCode != 13;
});
var _token = $("input[name='_token']").val(); // get csrf field.
var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();
var privacy = $("select[name='privacy']").val();
$.ajax({
url:'{{ route('todolists.store') }}',
type: 'POST',
data: {_token:_token, title:title, description:description, privacy:privacy},
success: function (response) {
if (response.error) {
_toastr((response),"top-full-width","error",false);
}
else{
$('.todolist-create-modal').modal('hide');
$("#content").load(location.href+" #content>*","");
_toastr((response),"top-full-width","success",false);
}
}
});
});
});
</script>
Q: How can I output the data directly in the view without reloading the page?
One way with jQuery was loading partial content, this will request again the page, get the contents of #content div and replace the HTML, fast and without reload the page:
$("#content").load("/url-of-page > #content > *");
Q: How can I output errors and success messages as flashmessage (toastr) message?
Just write the message on a HTML element:
success: function(data){
$(".alert-danger").addClass("hidden");
$(".alert-success").html(data.msg).removeClass("hidden");
},
error: function(data){
$(".alert-success").addClass("hidden");
$(".alert-danger").html(data.error).removeClass("hidden");
}
I previously had a javascript function onclick="submitDynamicSku()" but we have recently started converting to Angular to use the controller to build off of and i want to be able to pass this function through since it is part of the my ng-repeat.
Example:
onclick="submitDynamicSku('x', document.getElementById('y').value, false, true);"
I wanted to try:
onclick="submitDynamicSku(product.sku, document.getElementById('{{ product.id').value, false, true);"
Current Code:
$scope.submitSku = function(sku,id,false,true) {
submitDynamicSku(sku, document.getElementById(id).value, false, true);
function submitDynamicSku(sku, cnt, recurringOrder, viewCart) {
jQuery("#dynamicAsstName").val("");
jQuery("#dynamicSku").val(sku);
jQuery("#dynamicSkuCount").val(cnt);
jQuery("#setRecurringOrder").val(recurringOrder);
jQuery("#viewCart").val(viewCart);
if (viewCart == false) {
jQuery("form[name='dynamic_add_to_cart_form']")
.submit(function() {
this.action = "";
return true;
});
}
jQuery("form[name='dynamic_add_to_cart_form']").submit();
}
}
<%--Angular Block--%>
<li ng-repeat="product in products">
<div class="prod-img ">
<img ng-src="{{ product.imagePath }}" alt="{{ product.imageAlt }}" ng-class="{{ product.selector }}" />
</div>
<div class="prod-info">
<h2>{{ product.name}}</h2>
<h3>{{ product.price }}</h3>
<p>{{ product.description }} </p>
<a class="fancybox" href="#prodDesc-{{product.id}}">More Information »</a>
<div class="prod-cart">
<span class="qty-amt">QTY: <input value="1" id="{{ product.id }}" /> BOX</span>
<button href="javascript:void(0);" ng-click="submitSku(product.sku,product.id,false, true)">Add to Cart</button>
</div>
</div>
</li>
Assuming you have apply ng-repeat on div
HTML:
<div ng-repeat="product in products ">
<button ng-click="submitDynamicSku(product.sku,product.id,false, true)">{{product}}"</button>
</div>
Controller:
.controller('products', ['$scope', function($scope) {
$scope.products=[];
$scope.submitDynamicSku = function(sku,id,false,true) {
.......
}
}]);
Create the function inside your controller like this:
$scope.submitDynamicSku = function(pID){
var elm = document.getElementById(pID);
....
}
Then in the HTML use ng-click: (assume you use ng-repeat on product)
ng-click="submitDynamicSku(product.id)"
/* Inside the Controller */
$scope.submitSku = function(sku,id) {
submitDynamicSku(sku, id, false, true);
};
/* HTML */
<a ng-click="submitSku(product.sku, product.id);">...</a>