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 power并拥有现有数据怎么办？如何绑定表的这些值并使其可排序？

Answer 1

这很有意思，我认为当我们想要给出webjs的旧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原则和角度方式。

请让我知道你的想法。

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

1 个答案: