首頁 > web前端 > js教程 > 主體

AngularJS語法詳解_AngularJS

WBOY
發布: 2016-05-16 16:18:16
原創
1291 人瀏覽過

範本與資料的基本運作流程如下:

使用者請求應用起始頁面
使用者的瀏覽器向伺服器發起一次http連接,然後載入index.html頁面,這個頁麵包含了模板
angular被載入到頁面中,等待頁面載入完成,找出ng-app指令,用來定義模板的邊界
angular遍歷模板,尋找指定和綁定關係,將觸發一些列動作:註冊監聽器、執行一些DOM操作、從伺服器取得初始化資料。最後,應用程式將會啟動起來,並將範本轉換成DOM視圖
連接到伺服器去載入需要展示給使用者的其他資料

顯示文字

一種使用{{}}形式,如{{greeting}} 第二種ng-bind="greeting"

使用第一種,未被渲染的頁面可能會被使用者看到,index頁面建議使用第二種,其餘的頁面可以使用第一種

表單輸入

複製程式碼 程式碼如下:



    表單
   
   


   

        Starting:   //change的時候呼叫函數
        Recommendation: {{funding.needed}}
   



在某些情況下,我們不想一有變化就立刻做出動作,而是要進行等待。例如:

複製程式碼 程式碼如下:



    表單
   
   


   
  //ng-submit
        Starting:
        Recommendation: {{funding.needed}}
       
   



非表單提交類型的交互,以點擊為例

複製程式碼程式碼如下:



    表單標題>
    腳本>
   
    函數 StartUpController($scope) {
        $scope.funding = {startingEstimate:0};
        計算所需 = 函數() {
            $scope.funding.needed = $scope.funding.startingEstimate * 10;
        };
        $scope.$watch('funding.startingEstimate',computeNeeded);
        $scope.requestFunding = function() {
            window.alert("抱歉,請先吸引更多顧客。")
        };
        $scope.reset = function() {
            $scope.funding.startingEstimate = 0;
        };
    }
    腳本>
頭>

   

        開始:
        建議:{{funding.needed}}
       
        重設按鈕>
    表格>
身體>

列表、表格以及其他迭代類型元素

ng-repeat會透過$index傳回目前引用的元素序號。範例程式碼如下:

複製程式碼程式碼如下:



    表單標題>
    腳本>
   
    var Students = [{name:'Mary',score:10},{name:'Jerry',score:20},{name:'Jack',score:30}]
    函數 StudentListController($scope) {
        $scope.students = 學生;

    }
    腳本>
頭>

   


       
           
           
           
       
    表>
身體>

隱藏與顯示
ng-show和ng-hide功能是等價的,但是運作效果剛好。

複製程式碼程式碼如下:




<script><br />   function DeathrayMenuController($scope) {<br />     $scope.menuState = {show:false };//這裡換成menuState.show = false 效果就顯示不出來了。以後宣告變數還是放在{}裡面吧<br />     $scope.toggleMenu = function() {<br />       $scope.menuState.show = !$scope.menuState.show;<br />     };<br />   }<br /> </script>



 
 

       
  • Stun

  •    
  • Disintegrate

  •    
  • Erase from history

  •  

  


css類別與樣式

ng-class和ng-style都可以接受一個表達式,表達式執行的結果可能是如下取值之一:

表示css類別名稱的字串,以空格分隔
css類別名稱數組
css類別名稱到布林值的映射
程式碼範例如下:

複製程式碼 程式碼如下:





<script><br />   function HeaderController($scope) {<br />     $scope.isError = false;<br />     $scope.isWarning = false; <p>    $scope.showError = function() {<br />         $scope.messageText = "Error!!!!"<br />         $scope.isError = true;<br />         $scope.isWarning = false;<br />     } <p>    $scope.showWarning = function() {<br />         $scope.messageText = "Warning!!!"<br />         $scope.isWarning = true;<br />         $scope.isError = true;<br />     }<br />   }<br /> </script>



{{messageText}}

   
   



css類別名稱到布林值的對應
範例程式碼如下:

複製程式碼 程式碼如下:





<script><br />     function Restaurant($scope) {<br /> $scope.list = [{name:"The Handsome",cuisine:"BBQ"},{name:"Green",cuisine:"Salads"},{name:"House",cuisine:'Seafood'}]; <p>        $scope.selectRestaurant = function(row) {<br />             $scope.selectedRow = row;<br />         }<br />     }<br /> </script>


{{$index 1}} {{student.name}} {{student.score}}

  //css類別名稱到布林值的對應,當模型屬性selectedRow的值等於ng-repeat中得$index時,selectd樣式就會被設定到那一行
       
       
   
{{restaurant.name}} {{restaurant.cuisine}}



相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!