在非角度应用程序中使用 angularjs 对表列进行排序

Question

好吧，假设我有一张桌子

<table>
    <tr>
        <td>Name</td><td>Phone</td>
    </tr>
    <tr>
        <td>John</td><td>2222222</td>
    </tr>
    <tr>
        <td>Mark</td><td>3333333</td>
    </tr>
    <tr>
        <td>Alice</td><td>1999999</td>
    </tr>
</table>

这是由非 angularjs 应用程序呈现的。 我在网上看到的所有示例都表明我有一个控制器和一个范围以及所有 angularjs 的东西，但是如果我想处理现有数据怎么办？

有一次我很头疼，我放弃并重新编写了一切以成为一个 angularjs 应用程序。 存在一个主要问题：它没有被搜索引擎编入索引。或者至少不是所有人都这样（我知道谷歌非常聪明，但那只是谷歌）。

如果我想使用 angularjs 功能并拥有这些现有数据怎么办？如何绑定表的这些值并使其可排序？

Answer 1

这很有趣，我认为当我们想赋予 angularjs 的旧 Web 应用程序功能时它很有用。

以下代码无非是我的想法，没有经过深思熟虑。

在 HTML 中

<div ng-app="myapp" ng-controller="myctrl">
    <table>
        <tr>
            <td><a href ng-click="mgrtable.sort('name')">Name</href></td><td><a href ng-click="mgrtable.sort('phone')">Phone</a></td>
        </tr>
        <tr ng-init="mgrtable.add_row('John', '2222222')">
            <td>{{mgrtable.rows[0].name}}</td><td>{{mgrtable.rows[0].phone}}</td>
        </tr>
        <tr ng-init="mgrtable.add_row('Mark', '3333333')">
            <td>{{mgrtable.rows[1].name}}</td><td>{{mgrtable.rows[1].phone}}</td>
        </tr>
        <tr ng-init="mgrtable.add_row('Alice', '1999999')">
            <td>{{mgrtable.rows[2].name}}</td><td>{{mgrtable.rows[2].phone}}</td>
        </tr>
    </table>
</div>

在 JavaScript 中

angular.module('myapp', [])
    .factory('ManagerTable', function(){
        return function(){
            this.rows = [];
            var desc = {
                name: true, phone: true
            }
            this.add_row = function(name, phone){
                this.rows.push({name: name, phone: phone});
            }
            this.sort = function(key){
                var _desc = desc[key];
                desc[key] = !_desc;
                this.rows.sort(function(a, b){
                    var vala = a[key],
                        valb = b[key];
                    if (_desc){
                        return vala > valb ? 1: -1;
                    }else{
                        return vala > valb ? -1: 1;
                    }
                });
            }
        };
    })
;

function myctrl($scope, ManagerTable){
    $scope.mgrtable = new ManagerTable();
}

Demo jsfiddle is here.

当你想添加一些关于表格数据的功能时，你所要做的就是添加ManagerTable的功能。虽然我知道html不干净，但我认为这种方式可以保持MVC原则和角度方式。

请告诉我你的想法。