Маърузачи: техника фанлари бўйича фалсафа доктори, Маҳманов Ориф Қудратович


Download 0.95 Mb.
Pdf ko'rish
Sana04.12.2020
Hajmi0.95 Mb.
#159479
Bog'liq
11. Maruza Web dasturlashga kirish



model="name">
 

4-қадам 


• ng-bind директиваси орқали юқоридаги model қийматини боғлаш: 

• 
Hello !




AngularJS да биринчи иловани яратиш 

 



 

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angula

r.min.js"> 

 


ng-app

="">    


  
Enter your Name: 
ng-model

="name">
   

  
Hello 
ng-bind

="name">!


 

 

 

 



ng-app
="" ng-init="names=['Jani','Hege','Kai']"> 

  
Looping with ng-repeat:


 

  

     


        ng-repeat="x in names"> 

          {{ x }} 

         

      

 


 

 

 



 

ng-app="" ng-init="names=[ 

{name:'Jani',country:'Norway'}, 

{name:'Hege',country:'Sweden'}, 

{name:'Kai',country:'Denmark'}]"> 

 

Looping with objects:


 

     

      ng-repeat="x in names"> 

      {{ x.name + ', ' + x.country }} 

 

 

 

 

 

ng-app> 


My first expression: {{ 5 + 15 }}


 

 

 


Change the value of the input field:
 

 



ng-app

="" 


ng-init

="myCol='blue'"> 

 


ng-

model

="myCol"> 



 

 

 



ng-app="" ng-

init="quantity=1;cost=5"




Total in dollar: {{ 

quantity * cost }} 
 

 

 

 

 

ng-app="" ng-



init="quantity=1;cost=5"




Total in dollar: 

ng-bind="quantity 

* cost">


 

 

 

 

 

ng-app="" ng-



init="firstName='John';las

tName='Doe'"> 


The full name is: {{ 



firstName + " " + lastName 

}}
 

 

 

 



 

ng-app="" ng-

init="firstName='John';las

tName='Doe'"> 


The full name is:

ng-bind="firstName + ' ' + 

lastName">


 

 

 

 



 

ng-app="" ng-

init="person={firstName:'John

',lastName:'Doe'}"> 


The name is {{ 



person.lastName }} 
 

 

 

 



 

ng-app="" ng-

init="person={firstName:'John

',lastName:'Doe'}"> 


The name is ng-



bind="person.lastName">>
 


 

 

 



 

ng-app="" ng-

init="points=[1,15,19,2,40]"> 

 


The third result is {{ 

points[2] }}


 

 

 

 

 

ng-app="" ng-



init="points=[1,15,19,2,40]"> 

 


The third result is 
ng-bind

"points[2]">


 

 

 




ng-app

="myApp" 



ng-controller

="myCtrl"> 

{{ firstName + " " + lastName }} 

 

 

 

 

 



 


ng-app

="myApp" w3-test-directive

 

 

 

 




ng-app

="myApp" 



ng-controller

="myCtrl"> 

{{ firstName + " " + lastName }} 

 

 

 



 

 

 




The name is {{ lastName | uppercase }}
 



The name is {{ firstName | lowercase }}
 


 

 

 

 



Кейин ngAnimate модулига мурожаат қилишингиз керак: 

•  

Ёки ном билан ngAnimate модулига мурожаат қилишингиз мумкин: 



NgAnimate вазифаси нима? 

37 


 

NgAnimate  модули  class  ларни  қўшиш,  олиб  ташлаш 

вазифасини бажаради. 

NgAnimate 

модули 

HTML 

элементларни 

ҳаракатлантирмайди,  лекин  HTML  элементларни 

яшириш  ёки  намойиш  қилиш  каби  ҳодисаларни 

амалга оширади 

AngularJS да анимациялар 

38 


Angular Js да синфларни қўшиш ёки ўчириш вазифасини 

бажарувчи директивалар қўйидагилар: 

ng-show 


ng-hide 

ng-class 

ng-view 

ng-include 

ng-repeat 

ng-if 


ng-switch 

AngularJS да анимациялар 

39 


 

 

 



 

 

 

Hide the DIV: 

 

g-hide="myCheck">
 

 

 

Hide the DIV: 

model="myCheck">

 

 

 



ng-app


="myApp" 

ng-controller

="formCtrl"> 

  

 

    First Name: 

ng-model


="firstname"> 

  

 



 

 

 

ng-app

=""> 


  
 

    First Name: 

ng-model

="

firstname



"> 

  

 

  

You entered: {{firstname}}

 

 

 

ng-app

=""> 


  
 

    Check to show a header: 

    

checkbox


ng-model


="

myVar


"> 

  

 

  


myVar

">

TUIT



 

 

 

  Pick a topic: 

  

ng-


model

="myVar" value="edu">TUIT 

  

ng-


model

="myVar" 

value="Dekanat">Dekanat 

  

ng-

model


="myVar" 

value="Talaba">Talaba 



 

ng-switch

="myVar"> 

  


ng-switch-when

="edu"> 


     

TUIT

 

   

  ng-switch-when



="Dekanat"> 

     

Dekanat

 

        

  


ng-switch-when

="Talaba"> 

     

Talaba

 

       


ng-app


=""> 

 Select a topic: 

  <


select

 

ng-model



="myVar"> 

     

    

value


="TUIT">TUIT 

    

value

="Dekanat">Dekanat 



    

value


="Talaba">Talaba 

 

   

ng-switch

="myVar"> 

  


ng-switch-

when


="TUIT"> 

     

TUIT

  

  ng-switch-



when

="Dekanat"> 

     

Dekanat

 

 

  


ng-switch-

when


="Talaba"> 

     

Talaba

 



 

  

 

 



 

 

The input's valid state is:


 

{{myForm.myInput.$valid}}

 

 

 



 

 

The input's valid state is:


 

{{myForm.myInput.$valid}}

 

 

 


Try leaving the first input field blank:


 

 

Name: 


 

myForm.myName.$invalid">The name is required.
 


 


Address: 

 


 

 
Download 0.95 Mb.

Do'stlaringiz bilan baham:




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling