AngularJS app not loading

Question

I am trying to make a simple AngularJS app:

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body ng-app="myApp">
    <div ng-controller="mainController">
        Order by column:    <select ng-model="columnName">
                                <option value="+name">Name ASC</option>
                                <option value="age">Age ASC</option>
                                <option value="-salary">Salary DESC</option>
                            </select>
        <br/>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees | orderBy:columnName">
                    <td>{{ employee.name }}</td>
                    <td>{{ employee.age }}</td>
                    <td>{{ employee.salary }}</td>
                    **<td>{{ employee.salary }}</td>**
                </tr>
            </tbody>
        </table>
    </div>
    <script src="angular.min.js"></script>
    <script src="jquery-1.11.3.js"></script>
    <script src="app.js"></script>
</body>

</html>

AngularJS:

var app = angular.module('myApp', []);

app.controller('mainController', ['$scope',function($scope) {
    var employees1 = [
        {name: 'Jim', age: 18, salary: 4500, DOB: new Date("November 18th, 2009")},
        {name: 'Joe', age: 18, salary: 4000, DOB: new Date("November 18th, 2012")},
        {name: 'Bob', age: 20, salary: 6000, DOB: new Date("November 18th, 2004")},
        {name: 'Rob', age: 45, salary: 1800, DOB: new Date("November 18th, 2001")}
    ]; 

    $scope.employees = employees1;
    $scope.columnName = '+name'; 
}]);

EDIT:

I added the Date objects in my employee array and when I try to print them out in the ng-repeat in the tr it keeps giving me null for the date column:

oh I don't even know why I didn't think of that... The console says: Error: [$injector:unpr] http://errors.angularjs.org/1.5.0-rc.0/$injector/unpr?p0=orderbyFilterProvider%20%3C-""rderbyFilter — , Jan 11 '16 at 04:37
You have a typo. It must be `orderBy` not `orderby`. Also mention the name of the key instead of `columnName` — Rayon, Jan 11 '16 at 04:39

Anik Islam Abhi · Accepted Answer · 2016-01-11T04:44:49.067

0

Just remove '' from orderBy

<tr ng-repeat="employee in employees | orderBy :columnName">

If you use '',it'll consider as property name rather then model.

DEMO

edited Jan 11 '16 at 04:44

answered Jan 11 '16 at 04:35

Anik Islam Abhi

25,137
8
58
80

But I did a two way data binding for columnName using ng-model in the select HTML element – Jan 11 '16 at 04:37
Also I had one more quick question. Does the HTML get loaded first and then JS when the webpage is loaded? – Jan 11 '16 at 04:40
http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page check this . I think you'll get your answer :) @KB3 – Anik Islam Abhi Jan 11 '16 at 04:44
Hi can you please take a look at my edit. I came across another problem with the date objects displaying null... – Jan 11 '16 at 04:58
@KB3 provide your latest html or edit fiddle and provide me the link – Anik Islam Abhi Jan 11 '16 at 06:18
user3141852 helped me figure it out! – Jan 11 '16 at 19:33

score 0 · Answer 2 · answered Jan 11 '16 at 05:51

Like previous answers, change the typo in "orderBy" filterProvider.

For date object (null value), the problem in data you gave,

var employees1 = [
    {name: 'Jim', age: 18, salary: 4500, DOB: new Date("November 18th, 2009")},
    {name: 'Joe', age: 18, salary: 4000, DOB: new Date("November 18th, 2012")},
    {name: 'Bob', age: 20, salary: 6000, DOB: new Date("November 18th, 2004")},
    {name: 'Rob', age: 45, salary: 1800, DOB: new Date("November 18th, 2001")}
];

new Date("November 18th, 2001") is wrong inside date function you passed the string as wrong (18th only need to give 18). Because of this, while converting to date it's giving null value.

So for please refer the date function and date format in java script. refer this link . Convert to whatever format you want to display.

AngularJS app not loading

2 Answers2