I want to achieve something like this :
This is what I have so far:
You can see in my case the month is repeating. I want to have the months Group by.
Here is my controller code for getlist:
Event.getList().then(function(data){
$scope.events = data.events;
$rootScope.events = data.events;
});
For live https://plnkr.co/edit/jUhSXJJEAqKnJz1H3kiv?p=preview
HTML :
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul ng-repeat="(key,x) in groupevent">
{{key|date:'MMMM yyyy'}}
<li ng-repeat="y in x |orderBy:'start_date'">
<span>{{y|json}}</span>
</li>
</ul>
</body>
</html>
Javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.event = [
{id:'1',ex:true,end_date:'2017-08-31',start_date:'2017-08-29'},
{id:'15',ex:true,end_date:'2017-05-18',start_date:'2017-05-15'},
{id:'18',ex:true,end_date:'2017-06-12',start_date:'2017-06-09'},
{id:'51',ex:true,end_date:'2017-08-01',start_date:'2017-08-01'},
];
angular.forEach($scope.event,function(value,key){
value.groupdate = value.start_date.substring(0,7)+'-01';
});
$scope.event = _.orderBy($scope.event, ['start_date'], ['asc'])
$scope.groupevent = _.groupBy($scope.event,'groupdate');
});
Related
I'm working on a angularjsproject and I would like to add turbolinksto make the navigation on my WebSite faster. When I add turbolinksto my project, angularjsis not working.
I did an example on Plunker here.
I have two pages, index.html and products.html that look like that:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
<script src="turbolinks.js"></script>
</head>
<body ng-controller="MainCtrl">
<nav>
<ul>
<li>
Home
</li>
<li>
Products
</li>
</ul>
</nav>
<p>Hello {{name}}!</p>
</body>
</html>
And a javascriptfile:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.products = 'Products';
});
You can see when turbolinksis added, the {{name}} and {{products}} values are not displayed.
How can I fix this issue?
I am using google recaptcha . but it is not displaying at the time of pageload . But when i am using ctrl+R is displays. So what should i do to overcome this problem.
Thanks in advance.
Here is my code
var app = angular.module('plunker', ['vcRecaptcha']);
app.controller('MainCtrl', function($scope ) {
$scope.name = 'World';
$scope.respone1 = '';
$scope.respone2 = '';
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- <script src="//www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script> -->
<script src="angular.js"></script>
<script src="angular-rechapcha.js"></script>
<script src="app.js"></script>
<script>
$(window).load(function () {
window.location.href=window.location.href
});
</script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div vc-recaptcha key="'6LdexkAUAAAAAHJjHft19DekOjH0XdNsFjw1mdNm'" ng-model="respone1"></div>
<!-- <div vc-recaptcha key="'6LdexkAUAAAAAHJjHft19DekOjH0XdNsFjw1mdNm'" ng-model="respone2"></div> -->
<pre>respone1 = {{respone1 | json}}</pre>
<pre>respone2 = {{respone2 | json}}</pre>
</body>
</html>
Please find the plunker code
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.levels = [{LevelId:0,LevelName: "Level 1"}, {LevelId:1,LevelName: "Level 2" }];
$scope.updateLevel = function() {
console.log("Fired on change");
$scope.result="Data Changed";
}
});
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<label for="textbox3">Select Level</label>
<select id="LevelSelect" class="form-control" ng-Change="updateLevel()" ng-model="selectedLevel" ng-options="lvl as level.LevelName for level in levels"></select>
<p>{{result}}</p>
</body>
</html>
I referred to the various SO questions like on not calling the declared method and onchange not working. Advice.
The way you use ng-options is incorrect there for the rendered options values is getting undefined:undefined for all the options check below image, and when you change the selected item its not trigger ng-change event because all the values are same.
so change it to,
ng-options="level as level.LevelName for level in levels"
please refer this angular DOC
UPDATED PLUNKER
I'm trying to include select with data loaded from the json inside drawer. I use snap plugin. It works with hardcoded data but it doesn't work when i use dynamic data:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js#1.2.0-rc1" data-semver="1.2.0-rc1" src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/angular-snap.css" />
<script data-require="angular.js#1.2.0-rc1" data-semver="1.2.0-rc1" src="http://code.angularjs.org/1.2.0rc1/angular-route.js"></script>
<script src="js/snap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-snap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js"></script>
</head>
<body>
<snap-drawer>
<p ng-controller="RandCtrl">
Here's a big random number to show the drawer content
does not reload: <span>{{rand}}</span>
</p>
<select ng-model="correctlySelected"
ng-options="opt as opt.label for opt in options">
</select>
</snap-drawer>
<snap-content id="content">
<ng-view>aaaa</ng-view>
</snap-content>
</body>
</html>
This is my controller:
var app = angular.module('plunker', ['snap']);
app.controller('RandCtrl', function($scope) {
$scope.rand = Math.floor(Math.random() * 1000000);
$scope.options = [
{ label: 'one', value: 1 },
{ label: 'two', value: 2 }
];
$scope.correctlySelected = $scope.options[1];
});
ng-controller="RandCtrl" // put in body or in all code
plunker <body ng-controller="RandCtrl">
I know I can set html src tag like <img ng-src="{{phone.imageUrl}}">. But how can I set an id tag like <span id="sourceId::{{post.id}}" class="count"></span> ?
I tried <span id="{{ 'sourceId::'post.id }}" class="count"></span> but it didn't work.
It worked for me.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<span id="{{name}}" class="count">Jeinsh</span>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
here is working plunk => link
Inspect the element in developer tool on span and you will get updated id there.
As #karaxuna said, the following should work
id="sourceId::{{post.id}}"
Or doing the string concatenation inside the {{}} with a +
id="{{'sourceId::' + post.id}}"