I am very new to angularjs . I am stuck in ng-repeat directives.
Here is my code :
<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular.js"></script>
<script type="text/javascript">
function helloWorldExampleCtrl($scope){
$scope.userName = "Vicky!"
$scope.contacts = ["hi#email.com", "hello#email.com"];
}
</script>
</head>
<body>
<div>
<h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>
Emails : <br>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</h1>
</div>
</body>
</html>
Output I am getting :
Welcome Vicky! !
Emails :
hi#email.com
hi#email.com
hello#email.com
hello#email.com
But excepted is :
Welcome Vicky! !
Emails :
hi#email.com
hello#email.com
What i am doing wrong?.....
You have two versions of the AngularJS Library added to your page using the script tag. Remove one to solve the issue:
<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript">
function helloWorldExampleCtrl($scope){
$scope.userName = "Vicky!"
$scope.contacts = ["hi#email.com", "hello#email.com"];
}
</script>
</head>
<body>
<div>
<h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>
Emails : <br>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</h1>
</div>
</body>
</html>
A Plunker with only one AngularJS import that works
A Plunker with two AngularJS Library Imports that duplicates your problem
Related
command promt errorIn home.html, the value of {{message}} is not displayed .Infact it displays {{message}}
node.js is used to run the application.I guess there is a problem in connecting to the controller or the server.Please help to find the solution.
var app=angular.module('Demo',["ngRoute"])
.config(function ($routeProvider,$locationProvider)
{
$routeProvider
.when("/home",{
templateUrl:"home.html",
controller:"homeController"
})
.otherwise({
template : "<h1>None</h1><p>Nothing has been selected</p>"
})
$locationProvider.html5Mode(true);
})
.controller("homeController",function($scope)
{
$scope.message="hey home page";
})
<!DOCTYPE>
<html >
<head>
<title>angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="router.js"></script>
<base href="./" />
</head>
<body ng-app="Demo">
<div>
<h1>website header</h1>
</div>
<div>
<ul>
<li>home</li>
</ul>
</div>
<div class="mainContent">
<ng-view></ng-view>
</div>
<h1>footer</h1>
</body>
</html>
<h1>{{message}}</h1>
<div>
message from controller will be displayed here
</div>
Try to use this <li>home</li> Maybe you missed the #in the a tag
I have a controller like this:
controller('BreadCrumbs', ['$scope','crumble','$rootScope', function ($scope,crumble,$rootScope) {
function init (){
$scope.ui={};
$scope.ui.mdBreadCrumbs=[{"path":"path1","label":"label1"}];
$rootScope.oldScope=$scope;
}
$scope.setBreadCrumbs=function() {
$scope.ui.mdBreadCrumbs=crumble.trail;
}
init();
}]);
and in HTML,
<ol id="breadCrumbList" ng-controller="BreadCrumbs as bcrmbs">
{{ui.mdBreadCrumbs}}
<li ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</li>
</ol>
{{ui.mdBreadCrumbs}} is showing some like [{"path":"path1","label":"label1"}].
But in ng-repeat, it is not iterating.
Using $scope.setBreadCrumbs I put some more values, but still ngRepeat not working.
Anyone have any idea why it is not working?
Change
<ol id="breadCrumbList" ng-controller="BreadCrumbs as bcrmbs">
to
<ol id="breadCrumbList" ng-controller="BreadCrumbs">
DEMO
var app = angular.module('app', []);
app.controller('BreadCrumbs', ['$scope', function($scope) {
$scope.ui = {};
$scope.ui.mdBreadCrumbs = [{
"path": "path1",
"label": "label1"
}];
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="app" ng-controller="BreadCrumbs">
<ol id="breadCrumbList">
{{ui.mdBreadCrumbs}}
<li ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</li>
</ol>
<script type=" text/javascript " src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
<script type="text/javascript " src="MainViewController.js "></script>
</body>
</html>
You have to change something in your HTML and your HTML should be like this:
<div ng-app>
<div ng-controller="BreadCrumbs">
<div ng-repeat="bc in ui.mdBreadCrumbs">
<a ng-href="{{bc.path}}">{{bc.label}}</a>
</div>
</div>
</div>
I am posting my code can you please whats wrong in the code.
when i click on anchor tag "contacts" it will not change the view...
i already define the to separate controllers.
Thanks In advance......):
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="scripts/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
<!--<script src="scripts/angular-route.js"></script>-->
<script src="js/app.js">enter code here</script>
</head>
<body ng-app="myModule">
<h1>Welcome to ITYX</h1>
<p>Home</p>
<p>Contact</p>
<div ng-view></div>
</body>
</html>
app.js
var app =angular.module("myModule",['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/',{
templateUrl:'templates/main.html',
controller:'mainController'
}).
when('/contact',{
templateUrl:'templates/contact.html',
controller:'contactController'
}).
otherwise({
redirectTo:'/'
});
}]);
app.controller('mainController',function($scope){
$scope.message ="hi am in main section";
});
app.controller('contactController',function($scope){
console.log("contact controller");
$scope.message ="hi am in contact section";
});
main.html
<h1>Main Section</h1>
{{message}}
contact.html
<h1>Contact Section</h1>
{{message}}
You need to have it as,
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Welcome to ITYX</h1>
<div class="nav">
Main
Contact
</div>
</div>
</div>
</div>
DEMO
It must be your paths to either your files or angular. I've made a plunker to verify that your code works if you reference files correctly.
Plunker implementation of your code
With the only different to be:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
I am totally new to vue.js. I am trying to repeat a simple list but its not showing anything. My code is
<html>
<head>
<title>VUE Series</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="tasks">
<div>
<h2>Tasks</h2>
<ul class="list-group">
<li v-repeat="tasks"> {{ $value }} </li>
</ul>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<script src="app.js"></script>
</body>
</html>
and app.js file is :
new Vue({
el : '#tasks',
data : {
tasks : ['Assam', 'Manipur', 'Meghalaya']
}
})
Fiddle link is FIDDLE
You should use v-for instead of v-repeat and the syntax should be v-for="task in tasks"and you use taskto reference the current task.
My module isn't loading, and I can't figure out why. Could someone help me to find out what I am doing wrong?
The following is my HTML in a file named index.html:
<html ng-app="demoApp">
<head>
<title>Using AngularJS Directives and Data Binding</title>
<script type="text/javascript" src="_Script.js"></script>
<script src="angular.min.js"></script>
</head>
<body>
<!-- Get name out of array with controller using a module-->
<h3>Get names out of an array with controller using a module:</h3>
<div class ="container" ng-controller="SimpleController">
<input type="text" ng-model="search" /> {{ search }}
<ul>
<li ng-repeat="naam in namen | filter:search" >{{ naam }}</li>
</ul>
</div>
</body>
</html>
And this is the Javascript in a file named _Script.js:
var demoApp = angular.module('demoApp', []);
function SimpleController($scope) {
$scope.namen = [
'John',
'Will',
'Alex'
];
}
demoApp.controller('SimpleController', SimpleController);
I've looked for everything, so maybe it is simple. But I can't find it and got stuck with it.
Regards,
You're currently loading your _script.js first, and angular JS second. If you reorder them your script should work: