I am not sure if my Title makes sense, but what I am looking to do is this: I'm a noob to AngularJS and I can't seem to find the answers within the forum, but real basic for some, but for me, I can't seem to figure it out.
I have a variable {{ firstName }} in the HTML that I would like to show on the web page.
Below are the HTML, Demo.js and Data.js code.
Using console.log, I can pull the data., but I can't seem to bind to the variable firstName.
Any thoughts would be greatly appreciated.
Thanks!!!
HTML Code
<!DOCTYPE html>
<html lang="en" ng-app="Demo">
<head>
<meta http-equiv="x-ua-compatible" content="IE=8">
<title>AngularJS</title>
<script type="text/javascript" src="../WebContent/js/angularjs/1.2.20/angular.min.js"></script>
<script type="text/javascript">
var $userId = 101;
</script>
<script type="text/javascript" src="../Webcontent/js/Demo.js"></script>
<script type="text/javascript" src="../Webcontent/js/Data.js"></script>
</head>
<body ng-controller="getInfo">
<b class="header_top_links header_top_links_small welcome_rollover mr5">Welcome {{ firstName }}</b>
</body>
</html>
Demo.js
var app = angular.module("Demo",[]);
app.controller('getInfo', function( $scope ) {
for (var i = 0; i < users.length; i++) {
$scope.userId = users[i].id;
$scope.firstName = users[i].firstName;
if($userId == $scope.userId) {
if($scope.userId == 102) {
console.log("user ID: " + $scope.userId);
} else if ($scope.userId == 101) {
console.log("user ID: " + $scope.userId);
console.log("user first name: " + $scope.firstName);
} else {
console.log("user ID: " + $scope.userId);
}
}
}
});
Data.js
var users = [
{
id: 100,
firstName: "Guest"
}, {
id: 101,
firstName: "Basick"
}, {
id: 102,
firstName: "Advanced"
}
];
