I want to change CSS properties for a specific li inside ng-repeat, the loop:
<li id="cmmnt{{$index}}" ng-repeat="comment in ad.comments | orderBy : sortComment : true">
<div class="commentTextArea">
<p id="commentText">{{comment.text | limitTo: 100 }}</p>
<a ng-click="changeEm('cmmnt'+$index)" ng-show="comment.text.length>=10"> {{moreLessText}}
<i class="fa fa-angle-down" style="color: #ee4a4a;"></i>
</a>
</div>
</li>
</ul>
the ng-click="changeEm('cmmnt'+$index)" need to change the height(style.maxHeight) of the liby ID.
here is the function:
$scope.changeEm = function(liElement){ document.getElementById("'liElement'").style.maxHeight ="1em;!important";}
In the console.log() for 'liElement' is just a string and I cant find it by document.getElementById("'liElement'")
Thanks.
You are using a string as variable instead of the variable you pass into the function. I wouldn't recommend this approach, but you can fix it by changing this:
document.getElementById("'liElement'")
to this:
document.getElementById(liElement)
The approach I would recommend is to use ng-class instead:
<li id="cmmnt{{$index}}"
ng-class="{ 'active': comment.clicked }"
ng-repeat="comment in ad.comments | orderBy : sortComment : true">
<div class="commentTextArea">
<p class="commentText">{{comment.text | limitTo: 100 }}</p>
<a ng-click="changeEm(comment)" ng-show="comment.text.length>=10"> {{moreLessText}}
<i class="fa fa-angle-down" style="color: #ee4a4a;"></i>
</a>
</div>
</li>
and in your changeEm function:
$scope.changeEm = function(comment) {
comment.clicked = true;
}
Then you can use the 'active' class in your css:
/* the 'p' in non-clicked 'li' */
li p.commentText {
max-height: 10px;
}
/* the 'p' in a clicked 'li' */
li.active p.commentText {
max-height: auto;
}
The answer was very simple, I just add ng-class:
<div class="commentTextArea">
<p id="commentText" ng-class="comment.active==true?'visable':'notVisable'">{{comment.text}}</p>
</div>
and the function :
$scope.changeEm = function(comment){
console.log(comment);
comment.active = true;
}
finally the match CSS:
.visable {
height: 6.5em !important;
overflow: visible!important;
}
.notVisable{
overflow: hidden!important;
}
Hopes that helps someone!
Related
How to target the current hovering class when there are other classes with the same name? I see a lot of similar questions but all of the problems are solved with Jquery. Is it possible to use JavaScript with this question?
I want to add a star icon on every product picture. It will only appear when the picture is hovered. When the star is clicked, the star will toggle from .starsolid to .starsolid-close. However, the hover effect only appears on the first child, which also disables the toggle effect.
here's my code
Btw this is my first time asking a question on stackoverflow, so if there is something that I could've done better making this a better question, please tell me. Thanks!
<div class = "product divbox">
<ul class = "horizontalpic">
<li class='productpic img1' onmouseover='setsolidstar()' onmouseout='setoriginalstar()'>
<a href="" ></a>
<div class = fakebutton></div>
<div class = 'star' ><i class="far fa-star fa-s" style = color:black ></i></div>
<div class = 'star starsolid'><i class="fas fa-star fa-s" style = color:black></i></div>
<h3 class = 'productname'>coco crush</h3>
<h3 class = 'productdiscription'>菱格紋圖騰，窄版，18K BEIGE米色金</h3>
<h3 class = 'price'>NT$ 44,000*</h3>
<h3 class = 'discover'>查看詳情 ></h3>
</li>
<li class='productpic img2' onmouseover='setsolidstar()' onmouseout='setoriginalstar()'>
<a href="" ></a>
<div class = fakebutton></div>
<div class = 'star' ><i class="far fa-star fa-s" style = color:black ></i></div>
<div class = 'star starsolid'><i class="fas fa-star fa-s" style = color:black></i></div>
<h3 class = 'productname'>coco crush</h3>
<h3 class = 'productdiscription'>菱格紋圖騰，窄版，18K BEIGE米色金</h3>
<h3 class = 'price'>NT$ 44,000*</h3>
<h3 class = 'discover'>查看詳情 ></h3>
</li></ul></div>
I used onmouseover and onmouseout to create the hover effect. For the toggle effect, when clicked on the .fakebutton div the .starsolid and .starsolid-close will toggle.
const starhover = () => {
const star = document.querySelector('.productpic .star');
const starsolid = document.querySelector('.productpic .starsolid');
const fakebutton = document.querySelector('.productpic .fakebutton');
fakebutton.addEventListener('click', () => {
starsolid.classList.toggle('starsolid-close');
starsolid.style.transition = 'ease 0.5s';
}); starhover();
function setsolidstar(){
document.querySelector('.productpic .star').style.opacity = '1';
document.querySelector('.productpic .star').style.transition = 'ease 0.5s';
}
function setoriginalstar(){
document.querySelector('.productpic .star').style.opacity = '0';}
I hope that I understand you correctly. Here I make the star (the "S") visible when hovering the product. When clicking the star the class name "solid" will be toggled. So, the solid star will stay when you move the cursor away from the product.
I add the click event listener to the <ul> element. This is much more flexible because items could be added the list on a later stage. So, the only thing I need to check for is if the target of the click event has "star" in the class name. If so I toogle "solid". And then the rest is up to the CSS.
document.addEventListener('DOMContentLoaded', e => {
document.querySelector('ul.horizontalpic').addEventListener('click', e => {
if(e.target.classList.contains('star')){
e.target.classList.toggle('solid');
}
});
});
.horizontalpic {
list-style: none;
padding: 0;
margin: 0;
}
.productpic {
border: solid black thin;
margin: .5em;
}
.star {
visibility: hidden;
cursor: pointer;
}
li:hover .star {
visibility: visible;
}
.star.solid {
visibility: visible;
font-weight: bold;
}
<div class="product divbox">
<ul class="horizontalpic">
<li class='productpic img1'>
<div class=f akebutton></div>
<div class='star'>S</div>
<h3 class='productname'>coco crush</h3>
<h3 class='productdiscription'>菱格紋圖騰，窄版，18K BEIGE米色金</h3>
<h3 class='price'>NT$ 44,000*</h3>
<h3 class='discover'>查看詳情 ></h3>
</li>
<li class='productpic img2'>
<div class=f akebutton></div>
<div class='star'>S</div>
<h3 class='productname'>coco crush</h3>
<h3 class='productdiscription'>菱格紋圖騰，窄版，18K BEIGE米色金</h3>
<h3 class='price'>NT$ 44,000*</h3>
<h3 class='discover'>查看詳情 ></h3>
</li>
</ul>
</div>
Currently, I'm working on the Angular 8 Application. And I wanted to
make my first item of loop active by default. Active in the sense that its
border-color got changed. To further clarify my question I've also
attached a picture. In the below picture you can see that the first
category is 'Chicken'. So it must be selected by default. Any Help would be very much appreciated.
Thank You!
My HTML
<div class="category-slider swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="margin-right: 100px;" *ngFor="let i = index; let category of brand_Categories">
<a href="javascript:void(0);" (click)="getSubCategories(category.CategoryId,category?.CategoryTitle)"
class="categories">
<div>
<div class="icon text-custom-white bg-light-green" id="myDIV" (click)="toggle(i)" [ngClass]="(selectedID == i) ? 'selected' : 'not-selected' ">
<img
src="{{category?.CategoryImage || 'https://giftclubimagestorage.blob.core.windows.net/images/biryani.jpg'}}"
class="rounded-circle"
alt="{{category?.CategoryTitle || ''}}" class="imgrr">
</div>
</div>
<span class="text-light-black cat-name">{{category?.CategoryTitle || ''}}</span>
</a>
</div>
</div>
Here is an example I tried out.
html
<div fxLayout="row" fxLayoutGap="20px">
<div *ngFor="let item of items; let i = index;">
<div class="item" [ngClass]="{'selected-item': selectedID == i}" (click)="selectItem(i)">{{item}}</div>
</div>
</div>
css
.item {
padding: 10px;
border: solid 1px grey;
}
.selected-item {
border: solid 2px green;
}
ts
public items = ['Item1', 'Item2', 'Item3', 'Item4'];
public selectedID = 0;
selectItem(i){
this.selectedID = i;
}
How about using first variable provided in *ngFor context?
<div *ngFor="let category of brand_Categories; let i = index; let first = first">
<div [ngClass]="(selectedID == i || !selectedID && first) ? 'selected' : 'not-selected' ">
</div>
Optionally
<div *ngFor="let category of brand_Categories; let i = index;>
<div [ngClass]="(selectedID == i || !selectedID && i == 0) ? 'selected' : 'not-selected' ">
</div>
in addition consider setting the selectedId to zere in the Component.
I have a drop-down and I need to remove the selected option and show the remaining options. thanks in advance
FacultyorStudent_Data: Array<string> = ['Faculty/Coach','Student']
selected_FacultyorStudent: string = this.FacultyorStudent_Data[0];
SelectFacultyorStudent(FnS){
this.selected_FacultyorStudent=FnS;
}
<div class="text-center" id="perf-type" *ngIf="section=='practice'">
<h4 class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-bar-chart" aria-hidden="true"></i>
<b>{{selected_FacultyorStudent}} <i class="fa fa-angle-down"
style="font-size: 0.7em; font-weight: 700;"></i></b> ·<small>beta v4</small>
</h4>
<ul class="dropdown-menu" style="width: 20%; left: 40%;color: #337ab7;">
<li *ngFor="let item of FacultyorStudent_Data; let i = index;" class="text-center"
[ngClass]="{'bg-selected-quiz': selected_FacultyorStudent==item}"
(click)="SelectFacultyorStudent(item)">
{{item}}</li>
</ul>
</div>
In your FacultyorStudent_Data array iterate it through loop , and match if item is equals to the item you want to remove.
If they match then remove it using splice method.
In you .ts file:
for(let i=0;i<this.FacultyorStudent_Data.length;i++){
if(FacultyorStudent_Data[i]=='yourItemName'){
this.FacultyorStudent_Data.splice(i,1)
}
}
if (FnS == 'Student'){
this.FacultyorStudent_Data.splice(0,1,'Faculty | Coach Insights')
}
else{
this.FacultyorStudent_Data.splice(0,1,'Student')
}
}
I am creating dynamic tabs using ajax data loaded via the WordPress REST-API. Everything is working, but I need to add a class to the active tab in order to use CSS transforms on it.
I would appreciate any suggestions. I know how to use ng-class when clicking one element affects another, but not when it affects the clicked element. It's also worth noting I am using the 'as' syntax for the ng-controller.
JAVASCRIPT:
var homeApp = angular.module('homeCharacters', ['ngSanitize']);
homeApp.controller('characters', function($scope, $http) {
$scope.myData = {
tab: 0
}; //set default tab
$http.get("http://bigbluecomics.dev/wp-json/posts?type=character").then(function(response) {
$scope.myData.data = response.data;
});
});
homeApp.filter('toTrusted', ['$sce',
function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}
]);
HTML:
<div class="more_comics_mobile">More Comics <img src="./images/white-arrow.png" />
</div>
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
{{ item.content }}
</div>
<div class="char_tabs">
<nav>
<ul ng-init="myData.tab = 0" ng-model='clicked'>
<li class="tab" ng-repeat="item in myData.data">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<h3>{{ item.title }}</h3>
</a>
</li>
</ul>
</nav>
</div>
</section>
I am trying to add the class to the li element. I appreciate any help!
You can use ng-class like
<li class="tab" ng-repeat="item in myData.data" ng-class="{'active' : item.menu_order == myData.tab}"></li>
For more options you can visit
https://docs.angularjs.org/api/ng/directive/ngClass
<div class="more_comics_mobile">More Comics <img src="./images/white-arrow.png" />
</div>
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
{{ item.content }}
</div>
<div class="char_tabs">
<nav>
<ul ng-init="myData.tab = 0" ng-model='clicked'>
<li class="tab" ng-click="activate($index)" ng-repeat="item in myData.data">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<h3>{{ item.title }}</h3>
</a>
</li>
</ul>
</nav>
</div>
</section>
in your js
$scope.activate = function(index){
document.getElementsByClassName.setAttribute("class","tab");
document.getElementsByClassName[index].setAttribute("class","tab active");
}
I have a scenario where I have to show json data in multiple divs. I am not sure how to do this. So far I was able to get the json data and print it in console.
Let's say I have six divs and each of them have the following fields:
DIV 1
----------------
| JName: value1 |
| JobSkill: value2 |
| Descrip : value3 |
| Salary: value4 |
| Experien: value5 |
----------------
DIV 2
----------------
| JName: value1 |
| JobSkill: value2 |
| Descrip : value3 |
| Salary: value4 |
| Experien: value5 |
----------------
I want to map each json dataset values to each div1, div2..etc
I have json like this:
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
{"jobName":"NASA Scientist","jobPrimarySkill":null,"jobRole":"JOB_ROLE","jobDesignation":"JOB_EXP","jobDescription":"JOB_DESCRIPTION","jobSalaryRange":"JOB_POSITIONS","jobExp":"JOB_SAL_RANGE","jobPositions":"JOB_POSTEDBY","jobPostedBy":null}
so the first line or set of json should map to div1 and then the second one to div2 etc. How do I do this?
If I ng-repeat then it prints every thing in one div.
Html with six divs:
<div class="col-lg-8 col-md-6 col-sm-12">
<div class="job_box col-lg-offset-0" style="float: left; margin: 2px;" ng-controller="jobSummaryController">
<ul>
<li ng-repeat="x in token">
{{ x.jobName }}
</li>
</ul>
</div>
<div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
<div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
<div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
<div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
<div class="job_box col-lg-offset-0" style="float: left; margin: 2px;">Some text </div>
</div>
angular controller:
myApp.controller('jobSummaryController', function ($scope, $http) {
var url = 'rs/FetchJobSummary';
$http.get(url).success(function (response)
{
$scope.token = response;
console.log("job is:" + JSON.stringify(response));
}).error(function (response)
{
console.log("error", response);
});
});
the element you use ng-repeat on will be repeated as many times as there's items in your array/object.
So the way you got about it if you want 6 divs is you use ng-repeat on the div element you want to be repeated:
<div ng-repeat="x in token" class="job_box col-lg-offset-0" style="float: left; margin: 2px;">
<ul>
<li ng-bind="x.jobName">
</li>
<li ng-bind="x.jobPrimarySkill">
</li>
<!--...-->
<ul>
</div>
you have to put the ng-repeat on the div elements
http://plnkr.co/edit/TntCqHhbKDqaebDSlbOE?p=preview
<div ng-repeat="x in token" style="border:2px solid black;">
{{ x.jobName }}<br>
{{ x.jobPrimarySkill }}<br>
{{ x.jobRole }}<br>
{{ x.jobDesignation }}<br>
{{x.jobDescription}}<br>
</div>
if you want to use a directive
http://plnkr.co/edit/FWattoHd9yFmVbnCpUDC?p=preview
app.directive('mydir',function(){
return {
restrict: 'E',
scope : {
data : '='
},
templateUrl: 'mydir.html'
};
});
and html call
<div ng-repeat="data in token">
<mydir data='data'></mydir>
</div>
and the directive html :
<div style="border:2px solid black;margin:10px;">
{{data.jobName }}<br>
{{data.jobPrimarySkill }}<br>
{{data.jobRole }}<br>
{{data.jobDesignation }}<br>
{{data.jobDescription }}<br>
{{data.jobSalaryRange }}<br>
{{data.jobExp }}<br>
{{data.jobPositions }}<br>
{{data.jobPostedBy }}<br>
</div>
try
<div ng-controller="jobSummaryController">
<div class="job_box col-lg-offset-0" style="float: left; margin: 2px;"
ng-repeat="i in [1,2,3,4,5]">
<ul>
<li ng-bind="x.jobName"></li>
<li ng-bind="x.jobxxx"></li>
...
</ul>
</div>
</div>