Question

我正在尝试制作一个简单的AngularJS应用程序：

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'; 
}]);

编辑：

我在员工数组中添加了Date对象，当我尝试在tr中的ng-repeat中将它们打印出来时，它一直为date列提供null：

Answer 1

只需从orderBy

中删除

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

即可

''

如果您使用QPlainTextEdit，则会将其视为属性名称，而不是模型。

的 DEMO

Answer 2

与之前的答案一样，更改＆＃34; orderBy ＆＃34; filterProvider。

对于日期对象（空值），您提供的数据中的问题

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")}
];

新日期（＆＃34; 2001年11月18日＆＃34;）在日期函数中输入错误字符串是错误的（ 18th 只需要给18 ）。因此，在转换为日期时，它会给出空值。

因此请参考java脚本中的日期函数和日期格式。 refer this link。转换为您想要显示的任何格式。

AngularJS app无法加载

2 个答案: