I am facing a challenge with my AngularJS project focused on creating a Users application.
Instead of storing the users' data array within the controller, as I have already accomplished successfully in this example (jsFiddle), I aim to utilize jsonplaceholder.typicode.com as a data source:
var root = 'https://jsonplaceholder.typicode.com';
// Defining an Angular module named "usersApp"
var app = angular.module("usersApp", []);
// Setting up a controller for the "usersApp" module
app.controller("usersCtrl", ["$scope", function($scope) {
$scope.users = root + "/users";
}]);.search-box {
margin: 5px;
}
.table-container .panel-body {
padding: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" data-ng-app="usersApp">
<div class="panel panel-default table-container">
<div class="panel-heading">Users</div>
<div class="panel-body" data-ng-controller="usersCtrl">
<div class="row">
<div class="col-sm-12">
<div class="form-group search-box">
<input type="text" class="form-control" id="search" placeholder="Search User" data-ng-model="search">
</div>
</div>
<div class="col-sm-12">
<table class="table table-striped table-bordered" id="dataTable">
<thead>
<tr>
<th>Full name</th>
<th>Email</th>
<th>City</th>
<th>Street</th>
<th>Suite</th>
<th>Zipcode</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="user in users|filter:search">
<td>{{user.name}}</td>
<td><a href="mailto:{{user.email}}">{{user.email}}</a></td>
<td>{{user.address.city}}</td>
<td>{{user.address.street}}</td>
<td>{{user.address.suite}}</td>
<td>{{user.address.zipcode}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>However, despite my efforts, it seems that my approach is not functioning correctly. Any insights on what might be going wrong would be greatly appreciated. Thank you!
Update: Check out the working fiddle HERE.