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">
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>
I am using urish/angular-spinner but it is not working when I try to use it in controller through $scope.startSpin() and $scope.stopSpin();
Please find my plunker at Plunker. Here the spinner is not appearing at all.
The following is my code for starting and stopping spinner.
$scope.startSpin();
DashboardsDataService.getNetSpendOverTimeData()
.then(function(data) {
$scope.data = data;
$scope.stopSpin();
});
it is very simple you just need to remove the
spinner-key="spinner-1"
and will just work fine!
the final code
<!DOCTYPE html>
<html ng-app="myApp">
<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.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://fgnass.github.io/spin.js/spin.min.js"></script>
<script type="text/javascript" src="angular-spinner.js"></script>
<script src="app.js"></script>
<script src="services.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-controller="MainCtrl">
<span us-spinner="{radius:30, width:8, length: 16}" ></span>
<div>
<pre class="code">{{data | json }}</pre>
</div>
</body>
</html>
plnkr
http://plnkr.co/edit/yTIsH9uvD5JZEePMyeAi?p=preview
There's a bug: https://github.com/urish/angular-spinner/issues/26 spinner keys won't work.
What worked for me was registering every spinner in an array: when you call .spin(spinnerName) just add {spinnerName: true} to some controller's array, when you call stop(spinnerName) change it to {spinnerName: false}. Then show/hide the spinner with ng-if based on an expression like ng-if="mySpinners['spinnerName'] == true"
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}}"
I have a template in which I have rows, and there are two elements in each row and each element has different classes so I have my Html structure like so (simplified)
<div ng-repeat "row in deals">
<div class="deal-title-left">{{row[0].title}}</div>
<div class="deal-title-right">{{row[1].title}}</div>
</div>
I would like to add a search box feature that will use live search to go through the deal titles. I have tried using the ng-model="search" and adding a search filter into the row div, but how do I apply the model to each individual deal instead of the entire row?
Demo :http://plnkr.co/edit/zGYLPcPHTr1TOSZTIBI2?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js" data-require="angular.js#1.2.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="search"/>
<div ng-repeat="row in deals | filter :{title:search}">
<div class="deal-title-left">{{row.title}}</div>
</div>
</body>
</html>
JS:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.deals = [{
title: "Cola for free"
}, {
title: "Icecream for free"
}, {
title: "Tee for free"
},
]
});