Angularjs - Fill a comboBox dynamically(Array()) - javascript

I hope someone can help me figure out my issue. I am trying to fill a comboBox with some array data but I am getting an empty comboBox as if nothing it returns back to be displayed, I know I am closed but can find what I am missing.
Thank you in advance
angular.module('demoApp', [])
.controller('simpleController', ['$scope', function($scope) {
$scope.employeeCollections = [
{ id:'1',name: 'Dave Jones', title: 'IT Administrator' },
{ id:'2',name: 'Daniel Thomas', title: 'Software Developer' },
{ id:'3',name: 'Sam Alexandrovic', title: 'Senior Software Developer' }
];
$scope.selectedEmployee = $scope.employeeCollections[0].name;
}]);
<html ng-app="demoApp">
<head>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1> Employee Information </h1>
<div class="container" ng-controller="simpleController">
<select ng-model="selectedEmployee" ng-options="employee as employee.name for employee in employeeCollections"></select>
</div>
</body>
</html>

it seems your angularjs reference is wrong. please check the path. see below snippet with CDN.
<html ng-app="demoApp">
<body>
<h1> Employee Information </h1>
<div class="container" ng-controller="simpleController">
<select ng-model="selectedEmployee" ng-options="employee as employee.name for employee in employeeCollections"></select>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('demoApp', [])
.controller('simpleController',['$scope', function ($scope) {
$scope.employeeCollections = [
{ id:'1',name: 'Dave Jones', title: 'IT Administrator' },
{ id:'2',name: 'Daniel Thomas', title: 'Software Developer' },
{ id:'3',name: 'Sam Alexandrovic', title: 'Senior Software Developer' }
];
$scope.selectedEmployee = $scope.employeeCollections[0].name;
}
]
);
</script>
</html>

Related

How to animate a directive in angular js

As you can see from this plunker
I have a simple project viewer.
HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-controller="ProjectsController">
<h1>Hello Plunker!</h1>
<p>{{ name }}</p>
<div class="slider">
<div class="project" ng-repeat="project in projects">
<projects-info info="project"></projects-info>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Angular:
var app = angular.module("app", ['ngAnimate']);
app.controller('ProjectsController', ['$scope', function($scope) {
$scope.name = 'hello world';
$scope.projects = [
{
link: '#',
img: 'http://www.gravatar.com/avatar/{{hash}}',
description: 'Project 1'
},
{
link: '#',
img: 'http://www.gravatar.com/avatar/{{hash}}',
description: 'Project 2'
},
{
link: '#',
img: 'http://www.gravatar.com/avatar/{{hash}}',
description: 'Project 3'
},
{
link: '#',
img: 'http://www.gravatar.com/avatar/{{hash}}',
description: 'Project 4'
},
{
link: '#',
img: 'http://www.gravatar.com/avatar/{{hash}}',
description: 'Project 5'
}];
$scope.numOfProjects = 8;
}]);
app.directive('projectsInfo', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'projectsInfo.html',
};
});
My objective is to make the projects animate (more specifically, grow in size) when I hover over them. I've tried adding jquery to the html in a script tag but that didn't do anything. I've seen people use the 'link:' in their directive but I haven't seen a clear example where I can implement it to mine. My challenge is that I want to do this through angular, not css.
I really appreciate the help!
No need to touch your js, do it in your css like this:
.project {
transition: 0.2s;
}
.project:hover {
transform: scale(1.2,1.2);
}
Here's the demo
Ok, because you really want to do it with angularjs Which I don't really recommend just to execute for this requirement and just for the sake of demonstration and 'educational' purposes you may do it like this demo
using ng-mouseover, ng-mouseleave and ng-class
<div ng-mouseover='project.isHovered = true' ng-mouseleave='project.isHovered = false' ng-class='{hovered: project.isHovered}' class="project" ng-repeat="project in projects">
<projects-info info="project"></projects-info>
</div>
then in your css:
.project {
transition: 0.2s;
}
.project.isHovered {
transform: scale(1.2,1.2);
}

My first simple angular app. Objects aren't displaying

My first angular homework and I can't get the objects I make in my typescript file to appear when I try to call them into my html page. I've got to have a little typo somewhere or something, but I've been playing for an hour and I can't find it. Any help is greatly appreciated.
typescript:
namespace myApp{
angular.module("myApp", []);
class MainController {
public animal;
constructor() {
this.animal = [
{ id: 1, breed: "spaniel", foods: ["alpo", "bones", "cats"] },
{ id: 2, breed: "lab", foods: ["fish", "chicken", "cats"] },]
}
}
angular.module("myApp").controller("MainController", MainController);
And _Layout.cshtml
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="container body-content">
#RenderBody()
<hr />
</div>
<div class="container" ng-controller="MainController as vm">
<div class="col-md-6 col-md-6">
<h1>{{animal}}</h1>
<div>ng-repeat= "food in animal.foods"</div>
{{foods}}
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/FrontEnd/JS/app.js"></script>
</body>
</html>
Try this one,
<script>
var myApp = angular.module("myApp",[]); // creating new module
myApp.controller("MainController", function($scope){
// initializing animals variable
$scope.animals = [
{ id: 1, breed: "spaniel", foods: ["alpo", "bones", "cats"] },
{ id: 2, breed: "lab", foods: ["fish", "chicken", "cats"] }];
});
</script>
And your html should be,
<div class="container" ng-controller="MainController">
<div class="col-md-6 col-md-6">
<h1>Animals</h1>
<!-- Loop your animals variable-->
<div ng-repeat="animal in animals">
<h1>{{animal.id}}</h1>
<!-- Loop animal's food-->
<p ng-repeat="food in animal.foods"></p>
</div>
</div>
</div>
Please feel free to ask any doubt in this one.

Whis is the error in angular, I couldnot find it

here is my code.. where I made problem.. please help me out.. I am trying to create a controller what fill fetch data and show in html li part.. but I don't understand where is the error.. I have tried with adding jQuery min library and without it.. but failure.. kindly help me to short out this problem..
<html data-ng-app="myApp">
<head>
<title>First Angular application</title>
</head>
<body>
checkNames:
<input type="text" data-ng-model="namek">
<div class="container" data-ng-controller="SimpleController">
<ul>
<li data-ng-repeat="cast in castomers | filter:namek">{{cast.name|uppercase}} - {{cast.city}}</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.castomers = [{ name: 'krishnendu sarkar', city: 'kolkata' },
{ name: 'chanchal sarkar', city: 'bangalore' },
{ name: 'nilava chakraborty', city: 'pune' }]
};
</script>
</body>
</html>
thanks in advance..
You should create and angular module first with name myApp then you could have data-ng-controller="SimpleController" to be move it over body tag so that the namek input field included inside the SimpleController controller context.
Add ng-app="myApp" on the body tag. so that angular module gets initialize on page.
Markup
<body data-ng-controller="SimpleController">
checkNames:
<input type="text" data-ng-model="namek">
<div class="container">
<ul>
<li data-ng-repeat="cast in castomers | filter:namek">{{cast.name|uppercase}} - {{cast.city}}</li>
</ul>
</div>
</div>
Controller
angular.module('myApp', []).controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.castomers = [{
name: 'krishnendu sarkar',
city: 'kolkata'
}, {
name: 'chanchal sarkar',
city: 'bangalore'
}, {
name: 'nilava chakraborty',
city: 'pune'
}]
};
Demo PLunkr
please see this link here to see the whole code.
You should create angular module "myApp" which define the application then controller inside it.

AngularJs not loading sometimes

I am running a very basic program in angularjs but don't know why the script is not loading
the evaluation tags are displayed on the view page.
Can anyone tell me what's wrong with the program?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app='myApp'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Your Shopping Cart</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-controller='CartController'>
<h1>Your Order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script type="text/javascript">
function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: '8', price: '3.95'},
{title: 'Polka dots', quantity: '17', price: '12.95'},
{title: 'Pebbles', quantity: '5', price: '6.95'}
];
$scope.remove = function(index) {
// splice is an ECMA javascript function
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>
I tried this code, this runs fine
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello World</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div ng-controller="ContactController">
Email:<input type="text" ng-model="newcontact"/>
<button ng-click="add()">Add</button>
<h2>Contacts</h2>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</div>
<script type="text/javascript">
function ContactController($scope) {
$scope.contacts = ["hi#email.com", "hello#email.com"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
</script>
</body>
</html>
Change this :
<html ng-app='myApp' >
to this
<html ng-app >
You don't have a module called 'myApp'
DEMO
You didn't declare your angular app. Try that:
var app = angular.module('myApp', []);
app.controller('CartController',function CartController($scope) {
$scope.items = [
{title: 'Paint pots', quantity: '8', price: '3.95'},
{title: 'Polka dots', quantity: '17', price: '12.95'},
{title: 'Pebbles', quantity: '5', price: '6.95'}
];
$scope.remove = function(index) {
// splice is an ECMA javascript function
$scope.items.splice(index, 1);
}
});

why angularjs ng-repeat not working

I am trying out the basics of AngularJS first time. I am trying out ng-repeat first time. However it is not working.
Here is a non working jsfiddle.
I have written the code in single standalone HTML file as follows and also angular.js file resides in the same directory
<html ng-app>
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var users = [
{
name:"Mahesh",
description:"A geek",
age:"22"
},
{
name:"Ganesh",
description:"A nerd",
age:"25"
},
{
name:"Ramesh",
description:"A noob",
age:"27"
},
{
name:"Ketan",
description:"A psychopath",
age:"26"
},
{
name:"Niraj",
description:"Intellectual badass",
age:"29"
}
];
</script>
</head>
<body>
<div>
<div data-ng-repeat="user in users">
<h2>{{user.name}}</h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
</html>
users must refer to a property that is accessible on the current scope. Scopes are AngularJS way of tying data from and to HTML. This is explained further in the "Model and Controller" chapter of the second tutorial page. See a working version of your Fiddle here.
HTH!
you have not define the controller such as
myapp.controller("AppController",function($scope){
$scope.users=[
{
name:"Mahesh",
description:"A geek"
},
];
});
/// than you can call controller to the view such as below code :
<body ng-controller="AppController">
<div><div data-ng-repeat="user in users">
<h2>{{user.name}}</h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
Live Example you can access by this link : http://jsfiddle.net/9yHjj/
Your code should have been like this....
<html ng-app="app">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var app = angular.module("app",[]).controller(AppController,["$scope",function($scope){
$scope.users=[
{
name:"Mahesh",
description:"A geek",
age:"22"
},
{
name:"Ganesh",
description:"A nerd",
age:"25"
},
{
name:"Ramesh",
description:"A noob",
age:"27"
},
{
name:"Ketan",
description:"A psychopath",
age:"26"
},
{
name:"Niraj",
description:"Intellectual badass",
age:"29"
}
];
}])
</script>
</head>
<body ng-controller="AppController">
<div>
<div data-ng-repeat="user in users">
<h2>{{user.name}}</h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
</html>
<html ng-app="myapp1">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module("myapp1",[]);
myapp.controller("AppController",function($scope){
$scope.users=[
{
name:"Mahesh",
description:"A geek",
age:"22"
},
{
name:"Ganesh",
description:"A nerd",
age:"25"
},
{
name:"Ramesh",
description:"A noob",
age:"27"
},
{
name:"Ketan",
description:"A psychopath",
age:"26"
},
{
name:"Niraj",
description:"Intellectual badass",
age:"29"
}
];
});
</script>
</head>
<body ng-controller="AppController">
<div>
<div data-ng-repeat="user in users">
<h2 ng-bind="user.name"></h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
</html>
This code should work

Categories