I have created an application in rails , i have written small angular example , I have written in partial file and rendered it. But nothing is loading. Will angular work in partials? my code is
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
<p>So far we have made an HTML list based on the items of an array.</p>
</body>
</html>
And the output is
{{x}}
So far we have made an HTML list based on the items of an array.
And i am not getting any error in console or firebug
Can anybody suggest solution
Related
I’ve been having a problem with a scope property in my controller – a simple test title and an array of strings used with ng repeat. They are not being displayed on the screen when served up from our rather complex server. Note that with ng repeat it seems to know the size of the array, just doesn’t display it, see first example below.
They are being displayed correctly when served up from apps like codepen or plunker. It also works when I run it on localhost using a simple server. See working version in 2nd example below.
I know responders will protest that they cannot help without more specific information about our server - but I'm guess I'm asking specifically:
Have you seen a case where ng repeat seems to know the size of the array, but just doesn’t display the items in the array - if so what caused it?
What types of issues with our server do you think could cause this? What should I be looking for..
Non working example from our server
Working example from codepen or simple server on localhost
var app = angular.module('testApp', []);
angular.module('testApp').controller('AuthorizePageCtrl', ['$scope', function ($scope) {
'use strict';
$scope.mytesttitle = "this is a test";
$scope.myitems = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro_comercial Moctezuma"
];
}]);
<!DOCTYPE html>
<html data-ng-app="testApp">
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="/js/controllers/AuthorizePageCtrl.js"></script>
</head>
<body>
<div id="consent" ng-app="testApp">
<div ng-controller="AuthorizePageCtrl">
<h3>My test title should appear->{{mytesttitle}}</h3>
<div>
<ul>
<li ng-repeat="myitem in myitems">"myitem in myitems should appear->"{{myitem}}</li>
</ul>
</div>
<div ng-repeat="myitem in myitems">
<h2>"myitem in myitems should appear->"{{myitem}}</h2>
</div>
</div>
</div>
</body>
</html>
so first data-ng-app and ng-app they are the same. and you only need one. and for the JS i may this changes and it works for me.
Angular part:
var app = angular.module('app', []);
app.controller('AuthorizePageCtrl', ['$scope', function ($scope) {
$scope.mytesttitle = "this is a test";
$scope.myitems = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro_comercial Moctezuma"
];
}]);
HTML part:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="//code.angularjs.org/1.6.6/angular.js" ></script>
<script src="app.js" ></script>
</head>
<body>
<div id="consent" >
<div ng-controller="AuthorizePageCtrl">
<h3>My test title should appear->{{mytesttitle}}</h3>
<div>
<ul>
<li ng-repeat="myitem in myitems">"myitem in myitems
should appear->"{{myitem}}</li>
</ul>
</div>
<div ng-repeat="myitem in myitems">
<h2>"myitem in myitems should appear->"{{myitem}}</h2>
</div>
</div>
</div>
</body>
</html>`enter code here`
So it turns out web site uses swig which conflicts with angularjs.
It uses swig for template var which was conflicting with angularjs' use of {{}}, preventing this very simple example from working. Thanks for responses ....
See this other fix for swig/angular conflict if you don't want to use ng-bind
Currently new & working on a web app using AngularJS, using Nginx serv.
I want to select some precise values to put them in a html table.
I kept searching and never find an adequate solution.
Do you have an idea on how can I make this work?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('variables.json').success(function(data) {
$scope.variables = data;
});
});
</script>
<link rel="stylesheet" type="text/css" href="../app/css/style.css">
</head>
<body ng-app="app" ng-controller="myCtrl" ng-init="variables">
<ul>
<li ng-repeat="var in variables">
{{var.b}}
{{var.a}}
</li>
</ul>
</body>
</html>
JSON File:
{
"a":6084.0,
"b":979
}
I just put an example of the JSON file. My purpose is to display for example just the b or a value.
You can read as (key,value) in $variables and display value.
<ul>
<li ng-repeat="(key,value) in variables">
{{key}}:{{value}}
</li>
</ul>
Demo link
https://plnkr.co/edit/nTUOvyMHcDRdtSzyecLw?p=preview
ng-repeat only works if the data in your json will be Array Since the data is the Object it will not find any element so it won't showing values .
change the Json as below:
[{
"a":6084.0,
"b":979
}]
The directive ngRepeat works with objects if the following syntax is used:
<div ng-repeat="(key, value) in myObj"> ... </div>
I just started AngularJS today; so I'm still very new to it. I have the following code:
<!DOCTYPE html>
<html ng-app>
<head>
<title>My first AngularJs</title>
</head>
</html>
<body data-ng-controller="SimpleController">
<div class="container">
<h3>Looping with the ng-repeat Directive</h3>
<input type="text" ng-model="nameText"/>{{ nameText}}
<ul>
<li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city}}</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}
When I run the above code, this is what I get:
when I remove the controller directive from the body tag, I get this:
I don't know where the problem is coming from. I wish to display those names and cities. I will be grateful for your help. Thanks!
Try to register controller in angularjs app using build in dependency injection, in other words:
<script type="text/javascript">
var app = angular.module("app", []);
app.controller('SimpleController', ['$scope', function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}]);
</script>
then change ng-app to ng-app="app".
Here is JSBin with working example: http://jsbin.com/ficozajena/1/edit?html,js,output
For some reason when I use ng-repeat the $scope variable does not bind its data to the view. It's been driving me insane because I figure out what i'm doing wrong in this case. In the when I console.log the $scope variable, its there but it just refuses to bind to the view when i'm using ng-repeat. In this case the word "movie" in the paragraph tag is repeated 3x but there's not data to go with it. Here is the code below:
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
After long sleepless nights lol I figured out the answer. Apparently the problem was with my node js express server using mustache as a middleware to template html. It uses the {{ }} symbols as well so angular never got to interpret what was going on. So I used $interpolateProvider to change the angular symbols and now it works beautifully.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
To anyone else using a node.js backend and not using jade as a template language, I hope this helps!
It would be better to explicitly define the controller inside the module:
var myApp = angular.module("myApp", []);
myApp.controller('IndexCtrl', function($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
});
But.... I copied the code exactly, replaced angular resource path. And all is working.
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
i m new in angularjs. But there is problem that i cant resolve it my code is below
My index.html file is given below
<!doctype html>
<html ng-app = "myApp">
<head>
<script src=""https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js""></script>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope){
$rootScope.name = "Ari Lerner";
});
</script>
</head>
<body>
<div>
{{name}}
</div>
</body>
</html>
But still the output on Browser in
{{name}}
please help to solve my problem
I think you made this pretty complex for your self. You need to play with the scope of that moment instead of using the rootScope when their is only one level of scope involved.
However in order to make your example work created a fiddle for the same:
Fiddle
Code Snippet:
HTML:
<div ng-app>
<div ng-controller="test">
{{name}}
</div>
</div>
JS:
function test($scope){
$scope.name = "Ari Lerner";
}
Make sure your angularjs is included properly:
Put double quotes only once:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
demo: jsfiddle