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");
}
Related
I am trying to get the button to toggle only on the one clicked, but as I am using ng-repeat, it all changes together. How do i fix it so that it would only change on the one clicked?
HTML:
<ul>
<li class="displaySubCategory" ng-repeat="communityTheme in community | startFrom:currentPage*pageSize | limitTo:pageSize">
<div class="categoryImg">
<img src="img/csvIcon.png" />
<img src="img/shpIcon.png" />
</div>
<div class="categoryDesc">
<p>{{communityTheme.THEMENAME}}</p>
<a ng-href="https://assets.onemap.sg/shp/{{SHPFile}}" ng-click="getSHP(communityTheme.QUERYNAME)" target="_blank" download>SHP</a> |
<a ng-href="https://assets.onemap.sg/kml/{{KMLFile}}" ng-click="getKML(communityTheme.QUERYNAME)" target="_blank" download>KML</a> |
View on Map
Remove Marker
<!-- <a href="" ng-click="getData(communityTheme.QUERYNAME)" download>View Data</a> -->
</div>
</li>
</ul>
JS:
$scope.viewMarker = true;
$scope.getMapData = function (msg) {
$scope.viewMarker = !$scope.viewMarker;
}
Before:
After:
Modified code:
$scope.viewMarker = true;
$scope.getMapData = function (msg, passedIndex) {
if($scope.community[passedIndex].visibility)
{
$scope.community[passedIndex].visibility =false;
} else {
$scope.community[passedIndex].visibility = true;
}
$scope.viewMarker = !$scope.viewMarker;
<ul>
<li class="displaySubCategory" ng-repeat="communityTheme in community | startFrom:currentPage*pageSize | limitTo:pageSize">
<div class="categoryImg">
<img src="img/csvIcon.png" />
<img src="img/shpIcon.png" />
</div>
<div class="categoryDesc">
<p>{{communityTheme.THEMENAME}}</p>
<a ng-href="https://assets.onemap.sg/shp/{{SHPFile}}" ng-click="getSHP(communityTheme.QUERYNAME)" target="_blank" download>SHP</a> |
<a ng-href="https://assets.onemap.sg/kml/{{KMLFile}}" ng-click="getKML(communityTheme.QUERYNAME)" target="_blank" download>KML</a> |
View on Map
Remove Marker
<!-- <a href="" ng-click="getData(communityTheme.QUERYNAME)" download>View Data</a> -->
</div>
</li>
</ul>
this should help clarify...
var app = angular.module("test", []);
app.controller("myCtrl", function($scope) {
$scope.community = [
{ THEMENAME:"Milk", QUERYNAME:"Milk", visibility:true}
, { THEMENAME:"Bread", QUERYNAME:"Milk", visibility:true}
, { THEMENAME:"Cheese", QUERYNAME:"Milk", visibility:true}
];
$scope.getMapData = function(passedQueryName, passedIndex){
/*do what you were doing, just add this one more point*/
if($scope.community[passedIndex].visibility) {$scope.community[passedIndex].visibility =false;}
else {$scope.community[passedIndex].visibility = true;}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="test">
<div ng-app="myShoppingList" ng-controller="myCtrl">
<div ng-repeat="communityTheme in community ">
{{x}}
<div class="categoryDesc">
<p>{{communityTheme.THEMENAME}} # {{$index}}</p>
<a ng-href="https://assets.onemap.sg/shp/{{SHPFile}}" ng-click="getSHP(communityTheme.QUERYNAME)" target="_blank" download>SHP</a> |
<a ng-href="https://assets.onemap.sg/kml/{{KMLFile}}" ng-click="getKML(communityTheme.QUERYNAME)" target="_blank" download>KML</a> |
View on Map
Remove Marker
<!-- <a href="" ng-click="getData(communityTheme.QUERYNAME)" download>View Data</a> -->
</div>
</div>
</div>
<p>So far we have made an HTML list based on the items of an array.</p>
</div>
You can try using it like the below code where we'll be creating dynamic variable 'viewMarker' in the same object and to consider it's default value as 'false' and to toggle it in the getMapData function by inverting its value.
Template:
<ul>
<li class="displaySubCategory" ng-repeat="communityTheme in community | startFrom:currentPage*pageSize | limitTo:pageSize">
<div class="categoryImg">
<img src="img/csvIcon.png" />
<img src="img/shpIcon.png" />
</div>
<div class="categoryDesc">
<p>{{communityTheme.THEMENAME}}</p>
<a ng-href="https://assets.onemap.sg/shp/{{SHPFile}}" ng-click="getSHP(communityTheme.QUERYNAME)" target="_blank" download>SHP</a> |
<a ng-href="https://assets.onemap.sg/kml/{{KMLFile}}" ng-click="getKML(communityTheme.QUERYNAME)" target="_blank" download>KML</a> |
View on Map
Remove Marker
<!-- <a href="" ng-click="getData(communityTheme.QUERYNAME)" download>View Data</a> -->
</div>
</li>
</ul>
Controller:
$scope.getMapData = function (obj) {
obj.viewMarker = !obj.viewMarker;
}
As i see now you are using the same variable to handle the toggling part. you should have an individual variable with a boolean value to handle the toggling so that you can handle each element individually.
DEMO
I have a dynamic images coming from a json and doing *ngFor to loop through the objs and putting it in a carousel using bootstrap carousel, but I want to put a readmore link within the *ngFor so each item will have a read more.
I can't figure out how to do when a user click "readmore" it will scroll to its relative item showing about the image if that makes sense.
<div class="col-sm-4" *ngFor="let journey of Journey">
<div class="journey_block">
<div class="icon-workflow">
<div class="view view-fourth">
<img src="{{ journey.imageName }}" alt="">
<div class="mask">
Read More
</div>
</div>
<h4 class="journey_title">
<a [href]="journey.journey_url" *ngIf="journey.journey_url != 'javascript:;' " class="float-shadow">
{{journey.title}}
</a>
</h4>
</div>
</div>
My attempt is I thought I would then need to do for loop, I have 5 items in total in the json data.
getImg() {
this.http.get('./journey.json')
.map((res:Response) => res.json())
.subscribe(data => {
if(data) {
var jsonObj = JSON.parse(JSON.stringify(data));
this.Journey = jsonObj.journey;
for (var i = 0; i < this.Journey.length; i++) {
var element = this.Journey[i];
this.objCount = element;
console.log(this.objCount);
}
}
});
};
View full html structure of the carousel
Carousel structure
You need to have the index inside of the loop for making the data-slide-to attribute unique. This could be done by the predefined Angular2 value index.
Example
<!-- Angular 2.0 -->
<ul>
<li *ngFor="let item of items; let i = index">
{{i}} {{item}}
</li>
</ul>
In your code:
<div class="col-sm-4" *ngFor="let journey of Journey; let i = index">
<div class="journey_block">
<div class="icon-workflow">
<div class="view view-fourth">
<img src="{{ journey.imageName }}" alt="">
<div class="mask">
Read More
</div>
</div>
<h4 class="journey_title">
<a [href]="journey.journey_url" *ngIf="journey.journey_url != 'javascript:;' " class="float-shadow">
{{journey.title}}
</a>
</h4>
</div>
</div>
I was doing a very quick exercise with angular directives. My code is very simple.
app.js:
var app = angular.module('readingList', []);
app.controller('BooksController', function($scope){
$scope.books = books;
$scope.genres = genres;
})
app.directive('bookGenres', function(){
return {
restrict: 'E',
templateURL: 'partials/book-genres.html'
};
});
var books = [{
title: 'ABCD',
author: 'E. Fgh',
isbn: '123414312341234',
review: 'Hello world',
rating: 4,
genres: {
'non-fiction': true, fantasy: false
}
}];
var genres = ["foo1","bar2","foo2","bar3"];
}
app.html:
<div class="row" ng-controller="BooksController">
<button class="btn btn-default">Create Review</button>
<hr />
<hr />
<ul class="list-unstyled col-sm-8" >
<li class="book row" ng-repeat="book in books">
<aside class="col-sm-3">
<a href="http://www.amazon.com/gp/product/{{book.isbn}}">
<img ng-src="http://images.amazon.com/images/P/{{book.isbn}}.01.ZTZZZZZZ.jpg" alt="" class="full"/>
</a>
<p class="goodRating rating">{{book.rating}}/5</p>
</aside>
<div class="col-sm-9 col-md-8">
<h3>
<a href="https://rads.stackoverflow.com/amzn/click/com/0553593714" rel="nofollow noreferrer">
{{book.title}}
</a>
</h3>
<cite class="text-muted">{{book.author}}</cite>
<p>{{book.review}}</p>
<!-- Put Genre Here -->
<book-genres></book-genres>
<ul class="list-unstyled">
<li ng-repeat="(genre, state) in book.genres">
<span class="label label-primary" ng-show="state === true">
{{genre}}
</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
book-genres.html:
<ul class="list-unstyled">
<li ng-repeat="(genre, state) in book.genres">
<span class="label label-primary" ng-show="state === true">
{{genre}}
</span>
</li>
</ul>
Everything renders with the view except my book-genres directive. For reason, it doesn't work. I have checked the documentation. I checked other similar examples and nothing. If I can't get this directive to work, rendering out the other components such as the image is going to be a problem. I also checked the path of the partials views as well.
There's a couple possibilities here. You need to be sure to inject $scope into your controller:
app.controller('BooksController', ['$scope', function($scope) {
// do stuff
}]);
book.genres is not defined anywhere, so your ng-repeat has no items to display.
templateURL is also incorrect, it should be templateUrl.
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>
I have a web page which displays a list of items, the number of items can get quite big so I would like to display only 3 at a time and have next\previous buttons which let the user navigate between items.
I'm very new to Angular but I managed to retrieve all the items and display them on the UI but have no idea where to start to only display three and wire up the next and previous buttons to enable navigation.
Here's my code:
JS:
var app = angular.module('myApp', []);
app.controller('servicesController', function ($scope, $http) {
$http.get(url + "api/MapServiceAPI/GetServers")
.success(function (response) {
$scope.servers = response.Result;
});
});
HTML:
<div class="row top-space" ng-app="myApp" ng-controller="servicesController">
<div class="pull-left">
<img src="~/Content/Images/Service/PREVIOUS.png" />
<h4>PREVIOUS</h4>
</div>
<div class="pull-right">
<img src="~/Content/Images/Service/NEXT.png" />
<h4>NEXT</h4>
</div>
<ul class="col-md-3 text-center" ng-repeat="s in servers" ng-click="serviceClick(s.ServiceId)">
<li>
<div class="container">
<h4>{{ s.ServerName }}</h4>
</div>
<div class="container">
<img src="~/Content/Images/Server/SERVER.png" />
</div>
<div class="container">
<h5>{{ s.ServerDescription }}</h5>
</div>
</li>
</ul>
</div>
you can achieve using filters limitTo property
> <li ng-repeat="datalist in datalists | pagination: curPage * pageSize
> | limitTo: pageSize">
refere this jsfiddle which help you to understand better.
http://jsfiddle.net/dulcedilip/x7tg15v9/