與無角的應用angularjs

確定排序的表列，假設我有一個表與無角的應用angularjs

<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功能並擁有此現有數據，該怎麼辦？如何綁定表格的這些值並使其可排序？

來源

2015-04-16 Nemoden

我能想到的最好的方法是創建一個指令，獲取表格，解析數據（可能爲了理智的緣故使用jquery），然後使用合適的角度模板重新渲染它。當然，所有地獄都是醜陋的。 –

是的，我有希望有另一種方式:) – Nemoden

我想，或者，該指令可能是一個類似於http://trentrichardson.com/2013/12/16/sort-dom-elements-jquery/ 。這樣做並不是真正的角色，但是可以使用$ watch指令將範圍值映射到各種比較器。 –

這很有趣，我認爲它是有用的，當我們想給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原理和角度方式。

請讓我知道您的想法。

來源

2015-04-16 07:19:57 yazaki

這是如何解決表格不會被網頁抓取器編入索引的問題的？ –

糟糕！老實說我忘了搜索引擎的問題。然而，數據（可以說'約翰'）仍然存在於HTML中，因此我希望搜索引擎可以抓取。如果數據需要存在於搜索引擎的'td'標籤內，不幸的是我們需要用'display：none'來放置數據。 – yazaki

與無角的應用angularjs

回答

相關問題