CODEWITHSUNDEEP
javascriptangularjs
henry
henry

Reputation: 37

Using Controllers in Angular

<!DOCTYPE html>
<html>
 <head>
 <title>Table</title>
</head>
<body ng-app>
<div ng-controller="rowCollection as row">
</div>
<form>
<label for="predicate">selected predicate:</label>
<select class="form-control" id="predicate" ng-model="selectedPredicate" ng-options="predicate for predicate in predicates"></select>
</form>
<table st-table="rowCollection" class="table table-striped">
   <thead>
<tr>
    <th st-sort="firstName">first name</th>
    <th st-sort="lastName">last name</th>
    <th st-sort="birthDate">birth date</th>
    <th st-sort="balance">balance</th>
    <th>email</th>
</tr>
<tr>
    <th>
        <input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search"/>
    </th>
    <th colspan="3">
        <input st-search placeholder="global search" class="input-sm form-control" type="search"/>
    </th>
    <th>
        <input st-search="{{selectedPredicate}}" placeholder="bound predicate" class="input-sm form-control" type="search"/>
    </th>
</tr>
</thead>
<tbody>
  <tr ng-repeat="row in rowCollection">
    <td>{{row.firstName | uppercase}}</td>
    <td>{{row.lastName}}</td>
    <td>{{row.birthDate | date}}</td>
    <td>{{row.balance | currency}}</td>
    <td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>


 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js">     </script>
<script type="text/javascript" src="table.js"></script>
</body>
</html>
app.controller('filterCtrl', ['$scope', '$filter', function (scope, filter) {
scope.rowCollection = [
    {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: '[email protected]'},
    {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: '[email protected]'},
    {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: '[email protected]'}
];

scope.predicates = ['firstName', 'lastName', 'birthDate', 'balance', 'email'];
scope.selectedPredicate = scope.predicates[0];
}]);

I am trying to create an angular table using a controller but I am not sure about the syntax of ng-controller. Can anyone help with the syntax? I am just a beginner so I am not too familiar with all the exact syntax.

Upvotes: 0

Views: 57

Answers (2)

buzzsaw
buzzsaw

Reputation: 1486

Here is a working plunker of your code: http://plnkr.co/edit/7IQvbFQQTMJjHVlNBcr8?p=preview

You were using controllerAs syntax along with $scope in your controller. I have updated it to be consistent. You also had the ng-controller defined in a div that was not wrapping any of your code. That has also been updated.

The updated HTML:

<!DOCTYPE html>
<html ng-app="plunker">
 <head>

 <title>Table</title>
 <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-require="[email protected]"></script>
    <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
    <script src="app.js"></script>
</head>
<body>
<div ng-controller="testingCtrl">
<form>
<label for="predicate">selected predicate:</label>
<select class="form-control" id="predicate" ng-model="selectedPredicate" ng-options="predicate for predicate in predicates"></select>
</form>
<table st-table="rowCollection" class="table table-striped">
   <thead>
<tr>
    <th st-sort="firstName">first name</th>
    <th st-sort="lastName">last name</th>
    <th st-sort="birthDate">birth date</th>
    <th st-sort="balance">balance</th>
    <th>email</th>
</tr>
<tr>
    <th>
        <input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search"/>
    </th>
    <th colspan="3">
        <input st-search placeholder="global search" class="input-sm form-control" type="search"/>
    </th>
    <th>
        <input st-search="{{selectedPredicate}}" placeholder="bound predicate" class="input-sm form-control" type="search"/>
    </th>
</tr>
</thead>
<tbody>
  <tr ng-repeat="row in rowCollection">
    <td>{{row.firstName | uppercase}}</td>
    <td>{{row.lastName}}</td>
    <td>{{row.birthDate | date}}</td>
    <td>{{row.balance | currency}}</td>
    <td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

And the controller:

app.controller('testingCtrl', ['$scope', '$filter', function (scope, filter) {
scope.rowCollection = [
    {firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: '[email protected]'},
    {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: '[email protected]'},
    {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: '[email protected]'}
];

scope.predicates = ['firstName', 'lastName', 'birthDate', 'balance', 'email'];
scope.selectedPredicate = scope.predicates[0];
}]);

Upvotes: 1

Chris L
Chris L

Reputation: 1061

Without addressing any other issues, just the question..

You have named your controller 'filterCtrl'

So in your html:

<div ng-controller="filterCtrl">

angularJS documentation: https://docs.angularjs.org/api/ng/directive/ngController

Disclaimer: This is answering your question. In no way, shape, or form is this your only problem here.

That is why I am providing you with someone else's jsfiddle for you to play around with. This is a todo app which shows how to set up an angular app including:

<div ng-controller="TodoCtrl">

and 

  <li ng-repeat="todo in todos">
    <input type="checkbox" ng-model="todo.done">
    <span class="done-{{todo.done}}">{{todo.text}}</span>
  </li>

http://jsfiddle.net/dakra/U3pVM/

Upvotes: 0

Related Questions