當前位置：首頁 » 數據智能 » angularjs大數據量

angularjs大數據量

發布時間: 2021-03-06 03:57:10

『壹』 angular怎麼獲取表格每一列的數據

我們會關注兩種提交表單的方式：
舊方法：jQuery和php提交表單
新方法：AngularJS和PHP提交表單
首先看一下我們的表單，超級簡單：

形式要求
實現頁面無刷新表單處理
輸入姓名和超級英雄別名
如果有錯誤，顯示錯誤提示
如果輸入有誤，將輸入變成紅色
如果所有內容ok，顯示成功提示
文檔結構
在我們的展示中，僅需兩個文件
index.html
process.php

表單處理
讓我們新建一個PHP來處理表單。該頁面非常小並且使用POST方式提交數據。
處理表單：這對我們來說並不是那麼重要的。你可以使用其他你喜歡的語言來處理你的表單。
// process.php

<?php

$errors = array(); // array to hold validation errors
$data = array(); // array to pass back data

// validate the variables ======================================================
if (empty($_POST['name']))
$errors['name'] = 'Name is required.';

if (empty($_POST['superheroAlias']))
$errors['superheroAlias'] = 'Superhero alias is required.';

// return a response ===========================================================

// response if there are errors
if ( ! empty($errors)) {

// if there are items in our errors array, return those errors
$data['success'] = false;
$data['errors'] = $errors;
} else {

// if there are no errors, return a message
$data['success'] = true;
$data['message'] = 'Success!';
}

// return all our data to an AJAX call
echo json_encode($data);

這是一個非常簡單的表單處理腳本。我們僅檢查數據是否存在，如果存在，則不做任何處理和操做；如果不存在，則需要向$errors數組中添加一條信息。
為了返回我們的數據用於AJAX調用，我們需要使用echo和json_encode。這就是我們PHP表單處理所有需要做的操作。使用普通的jQuery AJAX或者Angular處理表單也是這樣的。
展示表單
讓我們創建一個HTML來展示我們的表單


<!doctype html>
<html>
<head>
<title>Angular Forms</title>


<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">





<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<script>

</script>
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">


<div class="page-header">
<h1><span class="glyphicon glyphicon-tower"></span> Submitting Forms with Angular</h1>
</div>


<div id="messages"></div>


<form>

<div id="name-group" class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Bruce Wayne">
<span class="help-block"></span>
</div>


<div id="superhero-group" class="form-group">
<label>Superhero Alias</label>
<input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader">
<span class="help-block"></span>
</div>


<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</form>

</div>
</div>
</body>
</html>

現在，我們有了表單。我們另外還使用了Bootstrap來使表單看起來不是那麼丑。使用Bootstrap語法規則，每個input下含有一個spot來展示我們文本的錯誤信息。
使用jQuery提交表單
現在，讓我們來使用jQuery處理表單提交。我會將所有的代碼添加到空的<script>標簽中


...


<script>
$(document).ready(function() {

// process the form
$('form').submit(function(event) {

// remove the past errors
$('#name-group').removeClass('has-error');
$('#name-group .help-block').empty();
$('#superhero-group').removeClass('has-error');
$('#superhero-group .help-block').empty();

// remove success messages
$('#messages').removeClass('alert alert-success').empty();

// get the form data
var formData = {
'name' : $('input[name=name]').val(),
'superheroAlias' : $('input[name=superheroAlias]').val()
};

// process the form
$.ajax({
type : 'POST',
url : 'process.php',
data : formData,
dataType : 'json',
success : function(data) {

// log data to the console so we can see
console.log(data);

// if validation fails
// add the error class to show a red input
// add the error message to the help block under the input
if ( ! data.success) {

if (data.errors.name) {
$('#name-group').addClass('has-error');
$('#name-group .help-block').html(data.errors.name);
}

if (data.errors.superheroAlias) {
$('#superhero-group').addClass('has-error');
$('#superhero-group .help-block').html(data.errors.superheroAlias);
}

} else {

// if validation is good add success message
$('#messages').addClass('alert alert-success').append('<p>' + data.message + '</p>');
}
}
});

// stop the form from submitting and refreshing
event.preventDefault();
});

});
</script>

...

這里處理表單有不少的代碼。我們有獲取表單中變數的代碼，有使用AJAX將數據發送至我們的表單的代碼，有檢查是否有錯和顯示成功提示的代碼。除此之外，我們希望每次表單提交之後，過去的錯誤信息都會被清除。確實是不少代碼。
現在，如果表單中含有錯誤，則：

如果提交成功：

現在，讓我們看使用Angular來提交相同的表單。記住，我們不需要更改任何關於我們的PHP如何處理表單的內容，我們的應用依然會具備相同的功能（在同一個地方展示錯誤和成功信息）。
使用Angular提交表單
我們准備在之前使用的<script>標簽中設置我們的Angular應用。所以刪除裡面的內容，我們就可以開始了。
設置一個Angular應用
步驟為：
1. 載入Angular
2. 設置mole
3. 這是controller
4. 將mole和controller應用於HTML
5. 設置雙向變數綁定
6. 這是錯誤和信息
看起來好像是很多內容，但是最終，我們會用非常少的代碼，並且看起來會非常簡潔。另外，創建帶有更多輸入更大的表單，也會更容易。
Angular 組件和控制器
首先，載入Angular並且新建組件和控制器


...


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>


<script>

// define angular mole/app
var formApp = angular.mole('formApp', []);

// create angular controller and pass in $scope and $http
function formController($scope, $http) {

}

</script>
</head>


<body ng-app="formApp" ng-controller="formController">

...

現在，我們有了Angular應用的基礎。我們已經載入了Angular，創建了組件模塊和控制器，並且將其應用於我們的網站。
接下來，我將展示雙向綁定是如何工作的。
雙向數據綁定
這是Angular的核心思想之一，也是功能最強大的內容之一。在Angular文檔中，我們看到：「在Angular網頁應用中的數據綁定，是模型和視圖層之間的數據自動同步。」這意味著，我們需要在表單中抓取數據，使用$('input[name=name]').val()並不是必需的。
我們在Angular中將數據和變數綁定在一起，無論是javascript也好，view也罷，只要有改變，兩者皆變。
為了演示數據綁定，我們需要獲取表單的input來自動填充變數formData。讓我們回到應用於頁面的Angular控制器中。我們在過一下$scope和$http。
$scope：控制器和視圖層之間的粘合劑。基本上，變數使用$scope從我們的控制器和視圖層之間傳遞和往來。具體詳細的定義，請參見文檔。
$http：Angular服務來幫助我們處理POST請求。更多信息，請參見文檔。
使用數據綁定獲取變數
好了，閑話少說。我們將這些討論應用到表單中去。方法比上面討論的要簡單。我們想Angular控制器和視圖中分別添加一行。


...


<script>

// define angular mole/app
var formApp = angular.mole('formApp', []);

// create angular controller and pass in $scope and $http
function formController($scope, $http) {

// create a blank object to hold our form information
// $scope will allow this to pass between controller and view
$scope.formData = {};

}

...

現在，我們已經建立了一個formData對象。讓我們用表單數據來填充它。在顯示調用每個輸入和獲得val()之前，我們用ng-model綁定一個特殊的輸入到變數。



...


<form>

<div id="name-group" class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name">
<span class="help-block"></span>
</div>


<div id="superhero-group" class="form-group">
<label>Superhero Alias</label>
<input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias">
<span class="help-block"></span>
</div>


<button type="submit" class="btn btn-success btn-lg btn-block">
<span class="glyphicon glyphicon-flash"></span> Submit!
</button>
</form>


<pre>
{{ formData }}
</pre>

...

現在，既然Angular已經將每個輸入綁到了formData。當你輸入每個輸入框，你可以看到formData對象被填充了！有沒有很酷！
你不必在view中使用$scope。一切被認為是嵌入到$scope中的。

處理表單
在我們的舊表單中，我們使用jQuery提交表單，像這樣$('form').submit()。現在我們使用Angular稱作ng-submit的特性。要想完成這個，我們需要添加一個控制器函數來處理表單，然後告訴我們form使用這個控制器函數：



...


<script>

// define angular mole/app
var formApp = angular.mole('formApp', []);

// create angular controller and pass in $scope and $http
function formController($scope, $http) {

// create a blank object to hold our form information
// $scope will allow this to pass between controller and view
$scope.formData = {};

// process the form
$scope.processForm = function() {

};

}

...


<form ng-submit="processForm()">

...

現在我們的form知道提交時使用控制器函數了。既然已經到位了，然我們用$http來處理表單吧。
處理表單的語法看起來跟原始方式很像。好處是我們不需要手動抓取表單數據，或者注入，隱藏，添加類顯示錯誤或成功信息。


...

// process the form
$scope.processForm = function() {
$http({
method : 'POST',
url : 'process.php',
data : $.param($scope.formData), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
console.log(data);

if (!data.success) {
// if not successful, bind errors to error variables
$scope.errorName = data.errors.name;
$scope.errorSuperhero = data.errors.superheroAlias;
} else {
// if successful, bind success message to message
$scope.message = data.message;
}
});
};

...

這就是我們的表單！沒有添加或移除類。我們需要每次提交表單時都清楚錯誤。我們只需綁定變數和需要用到的視圖。這非常棒，因為處理器用來處理數據，而視圖用來顯示數據.

jQuery POST vs Angular POST
有時能看到用POST方式提交在伺服器中看不到數據，這是因為jQuery和Angular的序列化和發送數據的方式不同。這歸結於你所使用的伺服器語言和它理解Angular提交的數據的能力。
上面的代碼是應用於PHP伺服器的，jQuery對於$.param函數則是必需的。雖然實現上文中提到的內容有非常多不使用jQuery的方法，但在本實例中，使用jQuery的唯一原因就是，它更簡單。

『貳』 angularjs怎麼清除緩存數據

如果用AngularJs在IE下發出GET請求從後台服務取完Json數據再綁定到頁面上顯示的話，你可能會回發現就算數據更答新了，IE還是會顯示原來的結果。實際上這時候IE的確是緩存了hashtag，沒有再次去做Http GET請求最新的數據。
最直接的辦法是在後台擼掉OutputCache，但這種做法並不推薦，需要改每一處被Angular調用的地方，代價太大。這種問題應該在前端解決最好。研究了一會兒總結了最有效的解決方法，並不需要改後台代碼了。

『叄』 angularjs ng-repeat怎麼拿最大的下標

正如很多文章所說的一樣，指令是AngularJS的靈魂，只有真正熟練掌握了Angular 指令，專才有希望成為屬AngularJS高手。在編寫Angular指令時，我們最常用到的就是其中的link函數，它用來與scope中的數據進行交互並綁定一些事件，例如click等等。

『肆』 AngularJS 在實際應用中有哪些優缺點

優點：
1. 模板功能強大豐富，並且是聲明式的，自帶了豐富的Angular指令；
2. 是一個比較完善的專前端MV*框架，包屬含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能；
3. 自定義Directive，比jQuery插件還靈活，但是需要深入了解Directive的一些特性，簡單的封裝容易，復雜一點官方沒有提供詳細的介紹文檔，我們可以通過閱讀源代碼來找到某些我們需要的東西，如：在directive使用 $parse；
4. ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對於敏捷開發的團隊來說非常有幫助，我們的項目從上線到目前，UI變化很大，在摸索中迭代產品，但是js的代碼基本上很少改動。

『伍』 angularjs 可以從ng-repeat中循環出五條數據嗎

循環輸出列表很多項目在web服務端做，前端做好模版後後端寫jsp代碼，雙方需要緊密合作，分清責任。有些項目由後端提供restful方法，前端用ajax調用自己循環，這種一般是大把的jquery拼字元串，太不直觀，有人搞出了js模板，也沒好到哪裡去。
用AngularJS就爽多了，語法和JSP類似：

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>ng-repeat directive</title>
</head>
<body>
<table ng-controller="CartController">
<caption>我的購物車</caption>
<tr>
<th>序號</th>
<th>商品</th>
<th>單價</th>
<th>數量</th>
<th>金額</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in items">
<td>{{$index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.price | currency}}</td>
<td><input ng-model="item.quantity"></td>
<td>{{item.quantity * item.price | currency}}</td>
<td>
<button ng-click="remove($index)">Remove</button>
</td>
</tr>
</table>

<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{name: "雷柏（Rapoo） V500 機械游戲鍵盤機械黃軸", quantity: 1, price: 199.00},
{name: "雷柏（Rapoo） V20 光學游戲滑鼠黑色烈焰版", quantity: 1, price: 139.00},
{name: "AngularJS權威教程", quantity: 2, price: 84.20}
];

$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>

ng-repeat指令生命在需要循環內容的元素上，items和控制器上的變數名對應，item是為數組中單個對象起的別名。$index可以返回當前引用對象的序號，從0開始，另外還有$first、$middle、$last可以返回布爾值，用於告訴你當前元素是否是集合中的第一個中間的最後一個元素。

『陸』 AngularJS 有哪些優缺點

AngularJS 在實際應用中優點：

模板功能強大豐富，並且是聲明式的，自帶了豐富的Angular指令；
是一個比較完善的前端MV*框架，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能；
自定義Directive，比jQuery插件還靈活，但是需要深入了解Directive的一些特性，簡單的封裝容易，復雜一點官方沒有提供詳細的介紹文檔，可以通過閱讀源代碼來找到某些我們需要的東西；
ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對於敏捷開發的團隊來說非常有幫助，即使UI變化很大，而且產品更新迭代，但是js的代碼基本上卻很少改動。

補充：Angular支持單元測試和e2e-testing。

AngularJS 在實際應用中缺點：

驗證功能錯誤信息顯示比較薄弱，需要寫很多模板標簽，沒有jQuery Validate方便，所以我們自己封裝了驗證的錯誤信息提示；
ngView只能有一個，不能嵌套多個視圖，雖然有 angular-ui/ui-router · GitHub 解決，但是貌似ui-router 對於URL的控制不是很靈活，必須是嵌套式的；
對於特別復雜的應用場景，貌似性能有點問題，特別是在Windows下使用chrome瀏覽器；
這沒有完美兼容低版本，升級之後可能會導致一個兼容性的BUG；
ng提倡在控制器裡面不要有操作DOM的代碼，對於一些jQuery 插件的使用，如果想不破壞代碼的整潔性，需要寫一些directive去封裝插件，但是現在有很多插件的版本已經支持Angular了；
Angular 太笨重了，沒有讓用戶選擇一個輕量級的版本，；

使用的人多才會暴露更多的問題，一起為這些問題尋找解決方案是一個社區的良性趨勢，選擇Angular，的確使開發效率大大提高。

『柒』關於AngularJS 框架的使用有哪些經驗值得分享

AngularJS 與 jQuery 等傳統操作 DOM 的思想有所不同，

對於 jQuery 等，一般是先有完整 DOM 然後在這些 DOM 的基礎上進行二次調教。
而 AngularJS 等框架則是根據數據模型以及其對應的 DOM 模版，然後通過模版像搭積木那樣組合頁面。

顯然的，前者在 SEO 上有天然優勢；而後者，搜索引擎還只能拿到某個模版，而無內容。
暫時沒想到有什麼特別好的解決方案，或許，對於內容頁，可以繼續使用傳統方式，而只在需要更多交互的地方應用 AngularJS，特別是在移動端應用上。

同理適用於各種前端的 MVC 框架，後端只要為前端提供數據介面，而不再需要為其拼接 HTML.

## 模塊化

AngularJS 也是遵循 AMD 的。（AMD 是啥，參考：使用 AMD、CommonJS 及 ES Harmony 編寫模塊化的 JavaScript）

雖然它也可以按照傳統代碼方式來寫（其首頁介紹的用法 AngularJS — Superheroic JavaScript MVW Framework），但是，既然都提供了這么一種模塊的方法，為何不用上呢

angular.mole('app', [
'moleA',
'moleB',
])
.controller('MainCtrl', [
'$scope',
function ($scope) {

}]);

而且，這種寫法還可以方便做代碼的合並與壓縮，在後面 Grunt 自動化一節中，就會提到使用 Nodejs/Grunt 來自動的做這些事情。

## 可復用模版 or 業務邏輯模版

今年 Google 開發者大會中提到的 Polymer（Welcome - Polymer）
這貨讓人感覺像是 Angular Directives 的進化。

而 Directives 做的事，就是把一堆 DOM 封裝為一條或者一組自定義的 HTML標簽，作為可復用的模版，以供組裝業務調用。 Demos 可參看：Angular directives for Twitter's Bootstrap

當然，為了方便修改，很多時候在做 directive 的時候需要將 template 用 templateUrl 代替，
不用擔心文件的碎片化，不利於前端載入 Grunt 自動化一節會提到如何合並這些碎片化的模版。

Directives 是作為可復用的模版，
而業務邏輯則是一般是一個業務對應一個 html 及其的 controller.

『捌』 AngularJS比jQuery強大嗎強大在哪

1.AngularJS和JQuery沒有任何可比性。因為他們倆就不是一樣的東西。AngularJS是JS的一種框架，而JQuery只是JS的一個函數庫。
2.AngularJS 誕生於2009年，由Misko Hevery 等人創建，後為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。
3.JQuery是繼prototype之後又一個優秀的Javascript庫。它是輕量級的js庫，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標准通用標記語言下的一個應用）、events、實現動畫效果，並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裡面插入一堆js來調用命令了，只需要定義id即可。

『玖』 angularjs ng-repeat 渲染完成後數據變化，可以再次渲染嗎

前言大家都知道對於處理小數量，ng-repeat是非常有用的，但是如果需要處理非常大的數量集，還是採用自定義的方法更好一些。特別是數據大多都是靜態的或已預存儲好的，這個時候應避免使用ng-repeat指令。 ng-repeat中的表達式和 $watch Angular中的表達式都會創建$watch 的Scope 函數。用於監聽模型變化，當你的模型部分發生變化時它會通知你。在ng-repeat指令中，如果某行數據有15列數據都綁定了表達式，如果數據有1000多行的話，那麼$watch就又獎金15000個，這性能簡直難以想像。所以當我們想要實現ng-repeat的功能又想兼備性能，那隻能另找一種方法了。替換ng-repeat的方法如果內容是靜態的，我們不需要兩種方式的綁定，只需要執行一次賦值語句{{::value}}就可以。如果anguluarJS是1.3以下的舊版本，是不支持的一次性綁定語法的。那麼最好的方法就是自定義指令，換言之，靜態數據可以使用一些簡單的方法來格式化。實現步驟 1、首先創建無序列表，用於保存動態綁定的內容。創建UL標簽作為容器用於顯示列表我們選擇動態載入List中的數據，首先添加div標簽，並命名為"repeater-alternative"用於渲染流中。 <div> <ul> <div repeater-alternative></div> </ul> </div> 2、定義List 數據： //示例數據 var studentsList = [ { FirstName: "Raj, LastName : "B", Country : "India", BirthDate: "01/01/1990" }, { FirstName: "Kumar, LastName : "S", Country : "India", BirthDate: "01/01/1990" }, .................. .................. .................. .................. ]; $scope.collectionObject = studentsList; //分配給$scope函數 3、實際List內容主要目的適用於重復集合對象，並顯示到列表中，所以需要制定訪問循環的邏輯，並按照需求來格式化字元串。 var tableRow = ""; angular.forEach($scope.collectionObject, function (item) { tableRow = tableRow + ['<li>', '<div class="col-md-1">' + item.FirstName + '</div> ', '<div class="col-md-1 ">' + item.LastName + '</div> ', '<div class="col-md-1 ">' + item.Country+ '</div> ', '<div class="col-md-1 ">' + item.Id + '</div> ', '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ', '</li>'].join(''); }); 4、List格式化邏輯一旦collectionObject的值已被賦給其他變數，就需要定義顯示數據的表格。 5、如何獲取分配CollectionObject的時間 Angular會監控$scope變數值得改變，一旦值被修改，則$watch將被處罰，所以需要將CollectionObject賦值邏輯放到$scope變數的$watch中。代碼如下： $scope.$watch($scope.object, function (oldValue, newValue) { }) 即，當我們執行賦值語句是，Angular會處理這個事件，並格式化List的內容。 $scope.$watch('collectionObject', function (oldValue, newValue) { var tableRow = ""; angular.forEach($scope.collectionObject, function (item) { tableRow = tableRow + ['<li>', '<div class="col-md-1">' + item.FirstName + '</div> ', '<div class="col-md-1 ">' + item.LastName + '</div> ', '<div class="col-md-1 ">' + item.State + '</div> ', '<div class="col-md-1 ">' + item.Id + '</div> ', '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ', '</li>'].join(''); }); }) 接下來就是將內容渲染到表格控制項中，也就是HTML<DIV>repeater-alternative標簽中。首先必須理解Angular的Directive機制，簡單而言，就是我們來指示Angular,當指定的變數被發現，就開始執行後台操作。 var userDirectives = angular.mole([]); userDirectives.directive('DOMElementFound', function () { return { replace: true, link: function ($scope, $elem, attrs) { //後台處理操作 } } }); 我們會通知Angular，當發現"repeater-alternative" 元素，則將以下數據渲染到列錶行中。代碼如下： var userDirectives = angular.mole([]); userDirectives.directive('repeaterAlternative', function () { return { replace : true, link: function ($scope, $elem, attrs) { $scope.$watch('collectionObject', function (oldValue, newValue) { var tableRow = ""; angular.forEach($scope.collectionObject, function (item) { tableRow = tableRow + ['<li>', '<div class="col-md-1">' + item.FirstName + '</div> ', '<div class="col-md-1 ">' + item.LastName + '</div> ', '<div class="col-md-1 ">' + item.State + '</div> ', '<div class="col-md-1 ">' + item.Id + '</div> ', '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div> ', '</li>'].join(''); }); //If IE is your primary browser, innerHTML is recommended to increase the performance $elem.context.innerHTML = tableRow; //If IE is not your primary browser, just appending the content to the element is enough . //$elem.append(tableRow); }); } } }); 總結在本文中，主要模擬了ng-repeat的工作方式和邏輯，但只限於靜態內容，所以輸出結果與調用ng-repeat結果相同，但是渲染更快，因為該方法只有一種數據綁定方式和少量的$watch。以上就是這篇文章的全部內容，希望本文的內容能對大家的學習或者工作有所幫助，如果有疑問大家可以留言交流。

閱讀全文

angularjs大數據量

與angularjs大數據量相關的閱讀推薦