10分鐘學會AngularJS的數據綁定

jopen 8年前發布 | 37K 次閱讀 Web框架 angularjs

前言：為什么要用AngularJS？  相信用過.NetMVC的人都知道用rezor綁定數據是一件很爽的事情，C#代碼直接在前臺頁面中輸出。然后這種比較適用于同步請求。   當我們的項目離不開異步請求綁定數據的時候，AngularJS的強大就能感受出來了！  下面大家就花十分鐘的時間了解一下AngularJS的數據綁定吧！Let‘s go

 一、 AngularJS腳本引用

就跟我們平常引用一個jquery一樣

 二、 ng-App配置

什么是ng-App，官方文檔的解釋是這樣的The ng-appdirective tells AngularJS that the <div> element is the "owner" of an AngularJS application. 就是說加了這句以后代表AngularJs應用程序加載了這個頁面

 三、 ng-controller配置！

ng-controller就是用來做頁面渲染的一個控制器

 四、 ng-repeater【數據綁定利器！】 

<!DOCTYPE html>
<html>
<head>
    <script src='javascripts/jquery-1.11.3.min.js' type="text/javascript"></script>
    <script src='javascripts/angular.js' type="text/javascript"></script>
</head>
<script>
    var mainApp = angular.module('mainApp', []);
    mainApp.controller('studentController',function($scope){
        $scope.student=null;
        //這邊定義一個json的對象
        $scope.student=[{'name':'王小明',"age":"22"},{'name':'李小剛',"age":"30"}];
    });
</script>
<body ng-app="mainApp">
<h1><%= title %></h1>


<div ng-controller="studentController">
    <!--遍歷對象-->
    <div  ng-repeat="item in student">
        <h1 ng-bind="item.name"></h1>
        <p ng-bind="item.age"></p>
    </div>
</div>


</body>
</html></pre> 
 五、 結果 


 


 六 總結  


到現在為止你已經掌握angularjs基本的數據綁定，他還有更多強大的功能，后續再為大家一一道來

來自： http://www.cnblogs.com/Lhuatao/p/5098789.html

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！