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.
Related
I'm trying to implement a Livesearch list onto a page where it takes an array and its objects and by using the search box, will filter matches and only show match of the search term,
The issue I'm having is that when looping through the array items using a forEach and trying to append the results to the DOM,
jQuery is Not defined
Essentially the code should grab the array, loop through the array, grab the building names and append each to the .list DIV as h4 items.
//testItemsArray
//array will contain objects used in the mockup for a livesearch function on the map pages.
var testItemsArray = [{
id: '1',
building: 'building1'
}, {
id: '2',
building: 'building2'
}, {
id: '3',
building: 'building3'
}, {
id: '4',
building: 'building4'
}, {
id: '5',
building: 'building5'
}];
(function($) {
$search = $('#searchbox'); // This is used for the filter input field
var buildingList = '',
buildingh4 = '';
testItemsArray.forEach(function(buildings) {
buildingh4 = "<h4>" + buildings.building + "</h4>";
buildingList += buildingh4
$('.list').html(buildingList);
});
}(jQuery));
<html lang="en">
<head>
<script src="./js/list.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Main Page</title>
</head>
<body>
<div class="container" id="search">
<header class="header">
<h1>University Of Lincoln Map Search</h1>
<h2></h2>
</header>
<div class="logo">
<p>This page is to be used for the locating of campus buildings and rooms</p>
</div>
<div class="info">
<div class="list">
********THIS IS WHERE I WANT ALL ITEMS TO DISPLAY** *****
</div>
</div>
<div class="key">
<div class="key-bg"></div>
<div class="key-text"><span><h2>Find the room you are looking for</h2></span></div>
<hr>
</div>
<div class="footer">
<p>map</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
You should place this line of code before closing the body tag. Instead of using IIFE, use document.ready
In your code, you put your list.js before jquery.min.js, that's why you get jQuery is undefined error.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/list.js"></script>
</body>
var testItemsArray = [{
id: '1',
building: 'building1'
}, {
id: '2',
building: 'building2'
}, {
id: '3',
building: 'building3'
}, {
id: '4',
building: 'building4'
}, {
id: '5',
building: 'building5'
}];
$(document).ready(function() {
$search = $('#searchbox'); // This is used for the filter input field
var buildingList = '',
buildingh4 = '';
testItemsArray.forEach(function(buildings) {
buildingh4 = "<h4>" + buildings.building + "</h4>";
buildingList += buildingh4
$('.list').html(buildingList);
});
});
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Main Page</title>
</head>
<body>
<div class="container" id="search">
<header class="header">
<h1>University Of Lincoln Map Search</h1>
<h2></h2>
</header>
<div class="logo">
<p>This page is to be used for the locating of campus buildings and rooms</p>
</div>
<div class="info">
<div class="list">
********THIS IS WHERE I WANT ALL ITEMS TO DISPLAY** *****
</div>
</div>
<div class="key">
<div class="key-bg"></div>
<div class="key-text"><span><h2>Find the room you are looking for</h2></span></div>
<hr>
</div>
<div class="footer">
<p>map</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="./js/list.js"></script>
</body>
</html>
Put your js reference that is
<!-- listJS cdn link-->
<script src="./js/list.js"></script>
After Jquery library reference that is below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You should have a reference to your Jquery library.
// IIFE - Immediately Invoked Function Expression
(function($, window, document) {
// The $ is now locally scoped
// The rest of your code goes here!
}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter
Check here for references
I'm having some trouble figuring out a way to insert a <p> in the DOM in each item of ng-repeat.
I'm doing ng-repeat of this array of objects:
$scope.items = [
{name: "john", paragraph:"<p>hi, im john</p>"},
{name: "rita", paragraph:"<p>hi, im rita</p>"},
{name: "joe", paragraph:"<p>hi, im joe</p>"}
];
then in the html file I have:
<div ng-repeat="item in items">
<br>
<br>
<p>this is the beginning of {{$index}} box</p>
<p>{{item.name}}</p>
{{insertHTML(item.paragraph)}}
<p>this is the end of {{$index}} box</p>
<br>
<br>
</div>
the insert.HTML(str) function is supposed to transform the string on each item.paragraph into an html element.
Here's the function:
$scope.insertHTML = function(str) {
var wrapper = document.createElement('div');
wrapper.innerHTML = str;
};
I created this plunker where you can check the whole code running
Try Directives. See demo here
var app = angular.module('plunker', []);
app.directive('myDir',function(){
return{
link : function(scope,element){
element.append(' <br><br><p>this is the beginning of box</p>');
element.append('<p>'+scope.item.name+'</p>');
element.append(' <p>this is the end of box<br><br><br></p>');
}}
})
app.controller('MainCtrl', function($scope) {
$scope.items = [
{name: "john", paragraph:"<p>hi, im john</p>"},
{name: "rita", paragraph:"<p>hi, im rita</p>"},
{name: "joe", paragraph:"<p>hi, im joe</p>"}
];
});
<!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>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<my-dir></my-dir>
</div>
</body>
</html>
You should use Angular's built in ng-bind-html and ngSanitize:
angular.module("demo", ["ngSanitize"]);
angular
.module("demo")
.controller("demoController", ["$scope", "$sce", function($scope, $sce) {
$scope.items = [{
name: "john",
paragraph: $sce.trustAsHtml('<iframe border="0" frameborder="0" allowtransparency="true" width="603" height="465" src="//www.chess.com/emboard?id=3681802"></iframe>')
},
{
name: "rita",
paragraph: "<p>hi, im rita</p>"
},
{
name: "joe",
paragraph: "<p>hi, im joe</p>"
}
];
}])
.red {
background-color: red
}
.blue {
background-color: blue
}
.green {
background-color: green
}
<!DOCTYPE html>
<html ng-app="demo">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="demoController">
<p>hello everyone</p>
<div ng-repeat="item in items">
<br>
<br>
<p>this is the beginning of {{$index}} box</p>
<p>{{item.name}}</p>
<div ng-bind-html="item.paragraph"></div>
<p>this is the end of {{$index}} box</p>
<br>
<br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-sanitize.js"></script>
</body>
</html>
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>
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.
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