I'd like to programmatically toggle the class on a single ng-repeat element, but my code appears to set it to all of the elements, and there is no way to reset it. How can I fix this?
instant.html
<div class="item item-button-right" ng-repeat="service in businessServiceList | filter:services">
{{service.title}}
<div class="buttons" style="padding: 0px">
<button class="button {{buttonStyle}}" ng-click="changeButtonStyle()">
<i class="ion-android-done"></i>
</button>
<button class="button button-stable">
<i class="ion-android-more-horizontal"></i>
</button>
</div>
</div>
controller.js
.controller('BookCtrl', function($scope, ServicesData, $stateParams) {
$scope.businessServiceList = ServicesData.getBusinessServiceList ($stateParams.business);
$scope.buttonStyle="button-stable";
$scope.changeButtonStyle = function(){
$scope.buttonStyle="button-positive";
}
})
ng-class, you must use!
<div class="item item-button-right" ng-repeat="service in businessServiceList | filter:services">
{{service.title}}
<div class="buttons" style="padding: 0px">
<button class="button"
ng-class="{ 'button-positive': isButtonClicked }" ng-click="isButtonClicked = !isButtonClicked">
<i class="ion-android-done"></i>
</button>
<button class="button button-stable">
<i class="ion-android-more-horizontal"></i>
</button>
</div>
</div>
So, in the ng-class attribute you can just put all your classes that should be toggled by certain conditions.
Related
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
<button
class="button-default button-m panel-heading-margin"
type="button"
ng-if="!$last"
ng-click="deleteButton();"
>
<i class="icon16 icon-delete v-sub di-block mr-0"></i>
</button>
<div class="modal-footer mt-10 p-0">
<div
id="deleteview"
class="bg-gray-light row"
ng-show="$scope.displayModal"
>
<div class="col-md-9">
<h4 class="p-15 text-left">
You are going to <b>Delete</b> the <b>Mapping</b> you have
selected. Are you sure you want to continue?
</h4>
</div>
<div class="col-md-3">
<div class="pt-25 text-right pr-5">
<button class="button-cancel button-m">Cancel</button>
<button id="deletesinglemap" class="button-m button-primary">
Delete
</button>
</div>
</div>
</div>
<div id="addview" class="pull-right p-20" ng-hide="$scope.displayModal">
<span class="button-cancel" data-dismiss="modal">Cancel</span>
<button id="addmapping" class="button-m button-primary" type="button">
Add
</button>
</div>
</div>
Controller:
$scope.slideUpModal = function () {
$scope.displayModal = true;
$("#deleteview").show();
$("#addview").hide();
};
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
I am working on a post system with likes where the user can toggle the post`s like I have done everything correctly except the last step, the problem inside my v-for loop I fetch likes table from post-like relation(many to many since likes table has user_id and post_id) but it is iterating my button even when I add a condition look here-> duplicated like button, I have tried many things v-if, v-show I think the problem is with my algorithm I hope someone can fix that for me thanks.
<div class="panel panel-white post panel-shadow" v-for="post in posts" >
<div class="post-heading">
<div class="pull-left image">
<img v-bind:src="'img/profile/' + post.user.photo" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<b>{{post.user.name}} </b>
made a post.
</div>
<h6 class="text-muted time">{{post.created_at | hour}}</h6>
</div>
</div>
<div class="post-description">
<p>{{post.content}}</p>
<div class="stats">
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" v-for="(like) in post.likes" v-bind:style="like.user_id===id && like.post_id===post.id?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>
<a class="btn btn-default stat-item" #click.prevent>
<i class="fa fa-reply-all"> {{post.comments.length}}</i> Comments
</a>
</div>
</div>
<comment-input :post="post" :userId="id" :userPhoto="userPhoto"></comment-input>
<ul class="comments-list" v-for="comment in post.comments?post.comments:''">
<comments :comment="comment" :userId="id" :userPhoto="userPhoto"></comments>
</ul>
</div>
<hr>
</div>
</div>
Don't loop through the button element, try to use a method likedBythisUser to check if the current user liked the post in order to bind it to the button style :
methods:{
likedBythisUser(post,id){
return post.likes.find(like=>{
return like.user_id===id && like.post_id===post.id;
}) // return a boolean value
}
}
template :
<button class="btn btn-default stat-item" #click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" bind:style="likedBythisUser(post,id)?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>
Is there any way to access *ngFor variable item outside the current div. in my case the booking(item) method not able to access item variable. any possible way?
<div class="cart-item" *ngFor="let item of items">
<small>
<img [src]="item.imagePath" alt="{{item.name}}"
class="img-responsive" style="max-height: 100px" width="120px">
<p>Name: {{item.name}}</p>
<p>Price: {{item.price}}</p>
<button class="btn btn-danger" (click)="deleteItem(item)">X</button>
<hr/>
</small>
</div>
<button class="btn btn-primary btn-lg" (click)="booking(item)"
style="margin-right: 30px;">Book Now</button>
No, you need to put it inside the div. If you want to preserve your structure, then you should wrap your code in another div and have that use the ngFor directive instead.
The way ngFor works, is it will create an element (in your case, the <div class="cart-item"> multiple times, once for each item in the loop. The button will be placed after all the cart item elements, so how could it know which item it should refer to?
I think what you're trying to do is to put one button for each of your cart items. in this case, you would modify your code as following:
<div class="cart-item" *ngFor="let item of items">
<small>
<img [src]="item.imagePath" alt="{{item.name}}" class="img-responsive" style="max-height: 100px" width="120px"/>
<p>Name: {{item.name}}</p>
<p>Price: {{item.price}}</p>
<button class="btn btn-danger" (click)="deleteItem(item)">X</button>
<hr/>
</small>
<button class="btn btn-primary btn-lg" (click)="booking(item)" style="margin-right: 30px;">Book Now</button>
</div>
or, if you'd like to preserve your structure:
<div *ngFor="let item of items">
<div class="cart-item">
<small>
<img [src]="item.imagePath" alt="{{item.name}}" class="img-responsive" style="max-height: 100px" width="120px"/>
<p>Name: {{item.name}}</p>
<p>Price: {{item.price}}</p>
<button class="btn btn-danger" (click)="deleteItem(item)">X</button>
<hr/>
</small>
</div>
<button class="btn btn-primary btn-lg" (click)="booking(item)" style="margin-right: 30px;">Book Now</button>
</div>
In html A i am calling html B which contain tab as shown is the image. now the "Save " and "Save All" button is in html B i have used css to move to the top but this is not the right way to do. I need "Save" and "Save All" button in html A but for this i need to know which tab is selected.
HTML B
<div id="confi">
<div class="row">
<section widget-grid id="widget-grid">
<div class="col col-md-12">
<div ng-if="currComp" jarvis-widget id="script-widget" data-widget-color="darken" data-widget-colorbutton="false" data-widget-editbutton="false"
data-widget-deletebutton="false">
<header>
<span class="widget-icon">
<i class="fa fa-gear"></i>
</span>
<h2>Script Configuration for {{comp}}</h2>
</header>
<div class="widget-body padding-10">
<ul id="scriptTabs" class="nav nav-tabs bordered">
<li ng-repeat="s in scripts track by $index">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file"></i> {{s}}
<!-- <span class="badge bg-color-blue txt-color-white">6</span> -->
</a>
</li>
</ul>
<!-- style="height:400px;margin-bottom: 30px;" -->
<div id="scriptTabsContent" class="tab-content padding-10">
<div class="tab-pane active" id="s{{$index}}" ng-repeat="s in scripts track by $index">
<div style="height:753px;width: 100%;">
<div id="{{ s }}" style="height:100%;width: 100%"></div>
<div style=" position: absolute;margin-top: -910px;right: 0px;">
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;" ng-click="save(s)">Save</button>
<button class="btn btn-sm btn-primary pull-right" style="margin-top: 20px;margin-right: 20px;" ng-click="saveAll('all')">Save All</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Currently i am using button in TabsContent so that i can get the value of "s" to the controller B and i cont use ng-click it is giving me error
<li ng-repeat="s in services track by $index" ng-click="functionInScope(s)">
<a id="s{{$index}}tab" href="#s{{$index}}" data-toggle="tab">
<i class="fa fa-fw fa-lg fa-file" ></i> {{s}}
</a>
</li>
please help me to get the value of "s" with out using the ng-click, so that i can send the value of "s" to the controller A for the save function.
Just a suggestion, Can't we create a variable named "selectedTab" and when you click the tab just generate a KeyUp event from that tab and in this event you can change the value this variable and while posting just get the value from that "selectedTab" variable.
For reference how to generate an click event
https://angular.io/guide/user-input
when i click on edit button the view is changed by ng-if how to go back by clicking cancel button
<div class="timeline-body">
<div marked="cmnt.content" class="markdown" ng-if = "editPostComment != $index " ></div>
<!--Edit comment-->
<div class="commentBox" ng-if = "editPostComment == $index " >
<textarea
rows="10" > {{cmnt.content}}</textarea>
<div class="hints">
<span class="boldtext">**Bold**</span>
<span class="italictext">_itlaics_</span>
<span class="striktext">~~strike~~</span>
<span class="codetext">'code'</span>
<span class="codetext">'''preformatted'''</span>
<span class="quotetext">>quote</span>
</div>
<div id="comment-btns">
<button class="btn btn-primary pull-left" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click="cancel()">Submit</button>
<button class="btn btn-primary pull-left cancel-edit" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click = "cancelEdit()">Cancel</button>
</div>
</div>
</div>
If your route change when clicking on edit comment, you can do it like in javascript. Try this
$scope.cancel = function(){
$window.history.back();
}
But if it only depend to the nf-if condition you can set the value of editPostComment to be different to $index as below
$scope.cancel = function(editPostComment){
editPostComment = null;
}
and then change the cancel button to
<button class="btn btn-primary pull-left" ng-class="{'loading': commentig}" ng-disabled="commentig" ng-click="cancel(editPostComment)">Submit</button>