After searching online, I found this code snippet that I tried to implement, but unfortunately, it's not displaying any data.
Below is the HTML code:
<html data-ng-app="">
<head>
<title>Example 4: Using AngularJS Directives and DataBindings</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Styles/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container" ng-controller="SimpleController">
<h1>AngularJS Second Program</h1>
<br/>
Name:
<br />
<input type="text" data-ng-model="name" /><br/>
<br>
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script type="text/javascript" src="Scripts/angular.min.js"></script>
<script>
function SimpleController($scope)
{
$scope.customers = [
{name:'John Doe',city:'New York'},
{name:'John Smith',city:'Pheonix'},
{name:'Jane Doe',city:'Chicago'}
];
}
</script>
<script src="Styles/jquery.min.js"></script>
<script src="Styles/js/bootstrap.min.js"></script>
</body>
I also added Bootstrap for styling purposes.
A working example I referred to earlier looked like this:
<html data-ng-app="">
<head>
<title>Example 3: Using AngularJS Directives and DataBindings</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Styles/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body data-ng-init="customers=[{name:'John Doe',city:'New York'},{name:'John Smith',city:'Pheonix'},{name:'Jane Doe',city:'Chicago'}]">
<div class="container">
<h1>AngularJS Second Program</h1>
<br/>
Name:
<br />
<input type="text" ng-model="name" /><br/>
<br>
<ul class="list-group">
<li class="list-item" data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script type="text/javascript" src="Scripts/angular.min.js"></script>
<script src="Styles/jquery.min.js"></script>
<script src="Styles/js/bootstrap.min.js"></script>
</body>
This is only my fourth attempt at using AngularJS, so I'm pretty clueless about what went wrong. Any help would be greatly appreciated. Thank you!