I need to do something like this
<div ng-repeat "data in datas">
<iframe ng-src="myurl.html?cat={{data.id}}">
By the way it's just a local file no cross domain problem.
I know how to do with fixed url using $sce but don't know how with variable url which varies with ng-repeat
Your ng-repeat should be,
<div ng-repeat="data in datas">
DEMO
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.datas = [{ id: "https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg" },
{ id: "https://farm9.staticflickr.com/8455/8048926748_1bc624e5c9_d.jpg" }];
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<div data-ng-repeat="data in datas">
<a href='#'><img ng-src="myurl.html?cat={{data.id}}" /></a>
</div>
</div>
</body>
</html>
Related
Here is my code, Actually when I click on function but not showing alert and not getting error in console. So please tell me how to do.
HTML Code
<li class="has-megamenu" ng-click="homepage()" ><a ><span >Home</span></a>
</li>
app.js
app.controller('myController', function($scope){
$scope.homepage = function(){
alert('hi');
}});
There can be two reasons
1- Not using ng-app directive in the root element of your application.
2- You have not defined ng-controller properly.
Please follow following working code.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope) {
$scope.homepage = function() {
alert('hi');
}
});
</script>
</head>
<body ng-app="app">
<div ng-controller="myController">
<ul>
<li class="has-megamenu" ng-click="homepage()"><a><span >Home</span></a>
</li>
</ul>
</div>
</body>
</html>
First You have to add ng-app = "app"
Second You have to add ng-controller = "myController"
Final
Please check the updated code:
var app = angular.module("app", []);
app.controller('myController', function($scope){
$scope.homepage = function(){
alert('hi');
}});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app = "app">
<div ng-controller = "myController">
<li class="has-megamenu" ng-click="homepage()" ><a ><span >Home</span></a>
</li>
<div>
</body>
</html>
I started with AngularJS, but am unable to get the desired output. Here's the code.
index.html
<!doctype html>
<html ng-app>
<head>
<script src="scripts/angular.min.js"></script>
<script src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{totalTodos}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
</body>
</html>
todo.js
function TodoCtrl($Scope) {
$Scope.totalTodos = 4;
$scope.todos = [
{ text: 'Learn AngularJS', done: false },
{ text: 'Build an appp', done: false }
];
}
You need to implement the module and controller code for angular(basic example link http://codepen.io/larryjoelane/pen/VeQbrW ). You could place the following code in your todo.js file. I have placed some comment in the code to show additional changes I made to your posted code to make it work.
In the following example you will notice that I place the ng-app attribute inside the oppening tag of a div. This is because I do not have access to the html tag in code pen. The way you are attempting to do it in your html code is correct. The only thing you are missing is the value.
Live Example: http://codepen.io/larryjoelane/pen/WrMZxg
Angular Controller Code:
angular.module("app", []).controller('TodoCtrl', ['$scope', function($scope) {
//changed from $Scope.totalTodos = 4 (syntax error $Scope would be undefined)
$scope.totalTodos = 4;
$scope.todos = [
{ text: 'Learn AngularJS', done: false },
{ text: 'Build an appp', done: false }
];
}]);
You will also need to add an app name to your ng-app attribute.
Example: <html ng-app="app">
Fully corrected HTML:
<!doctype html>
<html ng-app="app">
<head>
<script src="scripts/angular.min.js"></script>
<script src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{totalTodos}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
</body>
</html>
Additional HTML example using ng-bind attribute:
<!--Example using ng-bind-->
<h1>Example using ng-bind<h1>
<h2>Total todos:<span ng-bind="totalTodos"></span></h2>
<ul class="unstyled">
<li ng-repeat="todo in todos" ng-bind="todo.text">
</li>
</ul>
Change this
$Scope
To this
$scope
Also you need
ng-app="app" which is your module name, i believe you haven't defined your module
Index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{totalTodos}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
</body>
</html>
todo.js
angular.module("app", []).controller('TodoCtrl', ['$scope', function($scope) {
$scope.totalTodos = 4;
$scope.todos = [
{ text: 'Learn AngularJS', done: false },
{ text: 'Build an appp', done: false }
];
}]);
Further info you can get here
Using ng-app without a value
Your todo.js contains a casing issue in the second line replace '$Scope' with '$scope'. your code works once I corrected that and include module if you haven't declared already like i mentioned in below code
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<script src="scripts/angular.min.js"></script>
<script src="scripts/underscore-min.js"></script>
<script type="text/javascript" src="scripts/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{totalTodos}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
<script>
angular.module("exampleApp",[])
.controller("TodoCtrl",function($scope){
$scope.totalTodos = 4;
$scope.todos = [
{ text: 'Learn AngularJS', done: false },
{ text: 'Build an appp', done: false }
];
});
</script>
</body>
I'm trying to pull the list of current streams from the API and iterate that information with AngularJS. When I put in the JSON data directly in the js file, Angular works fine. However, when using an http request as shown below, I get a blank page. I've searched high and low, but have had trouble applying it to my specific issue. Any help is appreciated. Thanks!
Http file:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.game }}
</li>
</ul>
</div>
<script src="repeat.js"></script>
</body>
</html>
Repeat.js
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $http) {
$http.jsonp("https://api.twitch.tv/kraken/streams?json_callback=JSON_CALLBACK")
.success(function(response) {$scope.names = response.streams;});
});
https://api.twitch.tv/kraken/streams?json_callback=JSON_CALLBACK isn't JSONP (it is plain JSON).
You need a server that will make a JSONP response in order to use $http.jsonp().
Well, using $http.get('url') does work. I was incorrectly thinking the 'data' object was an array and passing "[0]" to it which was incorrect. Below is the code and it works to pull the info and repeat the data as indicated in the markup. Thanks for your help!
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in data.streams">
{{ x.game }}
</li>
</ul>
</div>
<script src="repeat.js"></script>
</body>
</html>
JS:
var app = angular.module('myApp', []);
app.controller('namesCtrl', function($scope, $http) {
$http.get('https://api.twitch.tv/kraken/streams?').success(
function(data, status){
$scope.data = data;
});
});
Hi I am having trouble with this tutorial. I copied over the code but for some reason it is not working.
This is the html code
<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller = "MyController">
<h1>{{ person }}</h1>
and their name:
<h2> {{person.name}}</h2>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
and here is the JS
var app = angular.module('app', []);
app.controller('MyController', function($scope) {
$scope.person = {
name: "Ari Lerner"
};
});
It doesn't look like the AngularJS code is being recognized. Any ideas?
Your app name in the module definition:
var app = angular.module('app', []);
doesn't match the one you reference in your dom:
<div ng-app="myApp">
Change your module definition to:
var app = angular.module('myApp', []);
I thought loading an external template with Angularjs is as simple as this below,
<div ng-include='template/index.php'></div>
But it does not print anything out on the browser. What have I missed?
The html,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angualr</title>
<meta charset="utf-8">
<script src="js/angular.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div ng-include='template/index.php'></div>
</body>
</html>
the template,
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<input type='text' ng-model='searchText' />
<ul>
<li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
</ul>
<input type='text' ng-model='newPerson' />
<button ng-click='addNew()'>Add</button>
</div>
js/app.js,
var app = angular.module('MyTutorialApp',[]);
js/maincontroller.js,
app.controller("MainController", function($scope){
$scope.people = [
{
id: 0,
name: 'Leon',
music: [
'Rock',
'Metal',
'Dubstep',
'Electro'
],
live: true
},
{
id: 1,
name: 'Chris',
music: [
'Indie',
'Drumstep',
'Dubstep',
'Electro'
],
live: true
}
];
$scope.newPerson = null;
$scope.addNew = function() {
if ($scope.newPerson != null && $scope.newPerson != "") {
$scope.people.push({
id: $scope.people.length,
name: $scope.newPerson,
live: true,
music: [
'Pop',
'RnB',
'Hip Hop'
]
});
}
}
});
EDIT:
Directories,
index.html
js/
...
...
template/
index.php
EDIT 2:
index.html,
<div ng-app='MyTutorialApp'>
<div ng-include='template/index.php'></div>
</div>
template/index.php,
<div id='content' ng-controller='MainController'>
<input type='text' ng-model='searchText' />
<ul>
<li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
</ul>
<input type='text' ng-model='newPerson' />
<button ng-click='addNew()'>Add</button>
</div>
Live demo here (click).
ng-include looks for a $scope property, so you need to pass it a string, like this: ng-include="'/template/index.php'".
<div ng-include="'/template/index.php'"></div>
What you were passing to it essentially makes it look for this in your controller: $scope['/template/index.php'] = 'some string';
You're also bootstrapping angular in the template itself - so how could it be included? ng-app needs to be in the main page so that ng-include can work!
<some-element ng-app="myApp">
<!-- in here, angular things work (assuming you have created an app called "myApp" -->
<div ng-include="'/template/index.php'"></div>
</some-element>
Just replace some-element with something like html, body or whatever element you want the app to work from.
You bootstrapped your ng-app in the template, but you have to bootstrap it in your main page.
So just move the ng-app directive from the template to the main-page, e.G.
<html ng-app="MyTutorialApp">
<div ng-include src='template/index.php'></div>
try this
and add ng-app into top of the page
<html ng-app='MyTutorialApp'>
you must have bootstrap you angular application into your index.html