I want to add some css-classes into my html document. When I use my app without json(simple $scope.resumes = [{..some data..}]) it works nice, but when I include json file it works bad(i see necessary data, but without css-classes)
var myApp = angular.module('myApp', []);
myApp.controller('ResumeListCtrl', function ($scope, $http) {
$scope.title="resume";
$http.get(window.location+'/js/resumes.json').success(function(data){
$scope.resumes= data;
});
});
$(document).on("ready", function() {
$(".box:even").addClass("hvr-bubble-right").addClass("margin_right_5").addClass("box-float-right");
$(".box:odd").addClass("hvr-bubble-left").addClass("margin_left_5").addClass("box-float-left");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="expa col-xs-6 col-sm-6 col-md-6 col-lg-6" ng-repeat="resume in resumes">
<div class="box" >
<h3 class="h3-style">{{resume.name}}</h3>
<div class="description_company_name"><span>{{resume.company}}</span><span><i
class="fa fa-circle"></i></span><span>{{resume.year}}</span></div>
<div class="hidden-xs">
{{resume.description}}
</div>
</div>
</div>
Use ng-class-even and ng-class-odd like this:
<div class="box" ng-class-odd="'hvr-bubble-left margin_left_5 box-float-left'" ng-class-even="'hvr-bubble-right margin_right_5 box-float-right'">
<h3 class="h3-style">{{resume.name}}</h3>
<div class="description_company_name"><span>{{resume.company}}</span><span><i class="fa fa-circle"></i></span><span>{{resume.year}}</span></div>
<div class="hidden-xs">{{resume.description}}</div>
</div>
If you use the append class on document ready, it might be too early.
Insert these two:
$(".box:even").addClass("hvr-bubble-right").addClass("margin_right_5").addClass("box-float-right");
$(".box:odd").addClass("hvr-bubble-left").addClass("margin_left_5").addClass("box-float-left");
In here
$http.get(window.location+'/js/resumes.json').success(function(data){
$scope.resumes= data;
});
When the document is ready does not mean that the JSON post is also ready :)
Related
So I have asp.net core 2 project where I have one master view with this html:
<div>
#foreach (var factory in Model.factoryList)
{
<div class="factory-panel-content">
<div class="factory-main-info">
#factory.Name
<div class="city-name">#factory.CityName</div>
<div class="factory-some-value">
#factory.someValue
</div>
</div>
<div id="factory-plot-content">
</div>
</div>
}
And one partial view with (html only)
<div class="row">
<div class="col-md-4">
<div id="flot-line-chart" style="height: 100px"></div>
</div>
<div class="col-md-2">
<div id="flot-pie-chart" style="height: 100px"></div>
</div>
<div class="col-md-2">
<div id="gauge"></div>
</div>
What I need is to get partial view for every #factory-plot-content in my master view for each of my factory.
Using ajax like below change only one of the #factory-plot-content - the first one (I understand why) but I don't know what is the best way to call ajax.get foreach of factory divs.
My ajax: (Which I call in master page. It will be great to call it while foreaching factories)
$(document).ready(function () {
$.ajax({
url: '/home/ShowShortFactoryInfo',
success: function (data) {
$("#factory-plot-content").html(data);
}
});
})
The first idea I had is to make custom ids like "factory-plot-content-#Model.FactoryName" but I'm kinda sure that this is an ugly way to reach result I need.
You can try with following code:
<div>
<script>
var factoryNumber = 0;
</script>
#foreach (var factory in Model.factoryList)
{
<div class="factory-panel-content">
<div class="factory-main-info">
#factory.Name
<div class="city-name">#factory.CityName</div>
<div class="factory-some-value">
#factory.someValue
</div>
</div>
<div class="partial-data" id="factory-plot-content">
<script>
getPartialData(function(data){
let partialData = $(".partialData")[factoryNumber];
partialData.html(data);
factoryNumber++;
});
</script>
</div>
</div>
}
<script>
function getPartialData(cb){
$.ajax({
url: '/home/ShowShortFactoryInfo',
success: function (data) {
cb(data);
}
});
}
</script>
Hope it helps :)
I have implemented dynamic components in Angular and whenever a dynamic component is loaded its corresponding jQuery is not working. Same jQuery script is working elsewhere.
This is where my dynamic component loads:
<div class="listing-table-outer" [#myAwesomeAnimation]='state'>
<app-dynamic-question [componentData]="componentData"></app-dynamic-question>
</div>
Below html will be loaded dynamically.
<div class="panel panel-default " >
<div class="panel-body" >
<h1>{{textLabel}}</h1>
<p>{{textHeader}}</p>
<div class="form-inline display-one" role="form">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="">
</div>
<div class="learn-more magtop10">
<a> <i class=" glyphicon glyphicon-play"></i> Learn More</a>
</div>
<div class="display_advance">
<div class="well">
<p>{{textFooter}}</p>
</div>
</div>
<div class="bs-component">
Clear
Skip
Continue
</div>
</div>
</div>
I have written this script
$(document).ready(function(){
$('.learn-more').click(function() {
$('.display_advance').slideToggle('1000');
$("i", this).toggleClass(" glyphicon-play glyphicon-triangle-bottom");
});
});
I have checked this script and it is working perfectly elsewhere.
Please let me know why this is happening.
As you already stated yourself, the html is loaded dynamically. That means that this html is not yet there when $(document).ready(function() { ... }) is executed. So you're trying to add a click event to an element that doesn't exist at that moment.For this exact situation there's a thing called event delegation.
Instead of doing
$('.learn-more').on('click', function() { ... });
you would do
$(document).on('click', '.learn-more', function() { ... });
This way any elements below document with class learn-more, now or in the future, will get this click event.
I have made an Angular function that leads to a link on click. My doubt is the I want the page to jump/scroll down when a cube is clicked in: https://codepen.io/Feners4/pen/KggAwg
I tried to link using an Id tag, but I wasn't successful.This is my Javascript:
directive('myClick', () => {
return {
restrict: 'A',
link: (scope) => {
scope.clicked = () => {
console.log('pppp');
window.location = "#/test.html";
}
}
};
});
The HTML of the cubes is the following:
<body ng-app="App">
<div ng-click="clicked()" my-click class="wrap">
<div class="cube" change-background colorcode=¨#f45642¨>
<div class="front"><span>Resume</span></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>
How can I use my function to achieve jumping the page to the bottom where I'm making a "second page" within the same one?
I didn't see an id for #/test.html in your document. You'll need to add the correct id. Also, you'll want to use window.location.hash.
For example:
window.location.hash = "#snap1":
You can use angular-scroll directive.
https://github.com/oblador/angular-scroll
Hi I´m new to Angular JS, and I am trying to create a "lightbox" by showing or hiding a div that fills the screen. However, the "ng-click" event and the div are on different templates.
First Template (where the div is supposed to show up):
<body ng-app="portfolio" ng-controller="lightboxController" >
<div ng-show="lightbox" class="lightbox">
<p ng-click="checkLightbox()">go back</p>
<p>{{message}}</p>
</div>
<div class="top-menu">
portfolio
about
contact
</div>
<div id="content-wrapper">
<div id="main-content">
<div ng-view></div>
</div>
</div>
</body>
Relevant controller:
app.controller('lightboxController', function($scope) {
$scope.checkLightbox = function(){
$scope.lightbox;
lightbox= !lightbox;
console.log(lightbox);
};
$scope.message = 'Everyone come and see how good I look!';
});
Second Template (where the ng-click event is):
<div class="grid">
<div class="grid-item dreiD video" ng-click="checkLightbox()">
<img src="data/portfolio/logo-animation/thumb.gif" class="thumb"/>
The error message says: ReferenceError: lightbox is not defined
Do as below:
Your html look like
<body ng-app="app" ng-controller="lightboxController" >
<div ng-show="lightbox" class="lightbox">
<p ng-click="checkLightbox()">go back</p>
<p>{{message}}</p>
</div>
<div class="top-menu">
portfolio
about
contact
</div>
<div id="content-wrapper">
<div id="main-content">
<div ng-view></div>
</div>
</div>
<div class="grid">
<div class="grid-item dreiD video" ng-click="checkLightbox()">
<img src="data/portfolio/logo-animation/thumb.gif" class="thumb"/>
</div>
</div>
</body>
Angular controller look like:
var app = angular.module('app', []);
app.controller('lightboxController', function($scope) {
$scope.checkLightbox = function(){
$scope.lightbox;
$scope.lightbox= !$scope.lightbox;
console.log(lightbox);
};
$scope.message = 'Everyone come and see how good I look!';
});
You can run this by clicking here
Im not really sure what your checkLightbox() method are supposed to do.
But if you want to make this reusable the best solution would be to refactor the checkLightbox functionality into a reusable directive.
Something like this:
function checkLightbox() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('click', function() {
// add your code here
})
}
}
}
app.directive('checkLightbox', checkLightbox);
Now you can use this anywhere in your views by adding the check-lightbox attribute wherever you want.
<div class="grid">
<div class="grid-item dreiD video" check-lightbox>
<img src="data/portfolio/logo-animation/thumb.gif" class="thumb"/>
Declare function or variable in $rootScope whenever you need to use them in any other controller.
Convert your controller into a factory and create the scopes at the $rootScope level:
app.factory('lightboxController', ['$rootScope', function($rootScope) {
$rootScope.checkLightbox = function(){
$rootScope.lightbox;
lightbox= !lightbox;
console.log(lightbox);
};
$rootScope.message = 'Everyone come and see how good I look!';
}]);
I have 3 columns. The first lists a list of subjects from an array. Within that array, each subject has it's particular courses listed within, and within that, the rest of the course information.
Can I have the ng-repeat "function" operate properly if it is placed using a .innerHTML function?
I could be using the wrong identifiers to try and call content from the array, which could also be causing my problems.
scope:
$scope.subjects = [
{text:'English', courses:[
{coursesub:'English 1', coursedata:[
{coursedesc:'test'}
]
}
]
},
{text:'Mathematics'},
{text:'Science'}
];
$scope.showDetail = function (todo) {
document.getElementById("courselistings").innerHTML = '<a ng-repeat="course in subject.courses" class="list-group-item" target="#courseinformation" ng-click="showDetail(course)">{{courses.coursesub}}</a>';
};
html + angularjs:
<div class="col-md-3" id="subjects">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Subjects</h3>
</div>
<div class="panel-body">
<div class="list-group">
<a ng-repeat="subject in subjects" class="list-group-item" target="#courselistings" ng-click="showDetail(subject)">
{{subject.text}}
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3" id="courselisting">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Courses</h3>
</div>
<div class="panel-body">
<div class="list-group" id="courselistings">
test
</div>
</div>
</div>
</div>
<div class="col-md-6" id="courseinfo">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Course Info</h3>
</div>
<div class="panel-body">
<div class="list-group" id="courseinformation">
</div>
</div>
</div>
</div>
I haven't done the courseinfo panel stuff yet, I just included it so that the columns would align properly.
No, it won't work.
You need to use template or directive.
http://docs.angularjs.org/guide/directive
You simple move innerHTML string to directive template
.directive('myCustomer', function() {
return {
scope: {
subject: '='
},
template: '<string here>'
};
});
And use it like
<my-customer subject="xxx"/>
A directive is a better answer for you. DOM manipulation should be done in directives, not controllers.
That said, it is possible using Angular's $compile which makes Angular aware of new HTML.
Just as a proof of concept- here's that function (and a working fiddle):
$scope.showDetail = function (todo) {
var html= '<div><a ng-repeat="course in subjects['+todo+'].courses" class="list-group-item" target="#courseinformation" ng-click="showDetail(course)">{{course.coursesub}}</a></div>';
var innerHTML =$compile(html)($scope)
var currente = angular.element(document.getElementById("courselistings"));
currente.replaceWith(innerHTML);
}
In order for this to work we also need to pass in the index of the course you want to show -- ng-click="showDetail($index)". This is because the $compile will compile this against the controller scope, not the one inside the ngRepeat.
As you can see it takes jumping through a number of hoops to make this work- which is part of why a directive is better.