Lapan ciri AngularJS yang orang tidak boleh letakkan_AngularJS

Lapan ciri AngularJS yang orang tidak boleh letakkan dikongsi dengan anda untuk rujukan anda. Kandungan khusus adalah seperti berikut

Pertama Teg pengulangan keluaran berulang

ng-repeat menggabungkan dengan sempurna jadual ul ol dan teg lain dengan tatasusunan dalam js

<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

Anda juga boleh menentukan susunan output:

<li ng-repeat="person in persons | orderBy:'name'">

Kedua Pengikatan dinamik teg model ng

Sebarang teg html dengan input pengguna dan nilai boleh diikat secara dinamik kepada pembolehubah dalam js,
Dan ia mengikat secara dinamik.

<input type="text" ng-model='password'>

Untuk pembolehubah terikat, anda boleh menggunakan {{}} untuk merujuk terus

<span>you input password is {{password}}</span>

Jika anda biasa dengan fiter, anda boleh mengeluarkan dengan mudah dalam format yang anda perlukan

<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>

Ketiga Ikat acara klik ke acara ng-klik

Menggunakan ng-click anda boleh mengikat acara klik dengan mudah pada label.

<button ng-click="pressMe()"/>

Sudah tentu, premisnya ialah anda perlu menentukan kaedah pressMe anda sendiri dalam domain $scope.

Tidak seperti kaedah onclick tradisional, anda juga boleh menghantar objek ke kaedah ng-click, seperti ini:

<ul>
<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

Dan sudah tentu teg ng-dblclick

Keempat Penyata cawangan ng-switch on, ng-if/ng-show/ng-hide/ng-disable tags

Penyata cawangan membolehkan anda menulis pertimbangan logik pada antara muka.

<ul>
<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

Kelima Sintaks pengesahan ng-trim ng-minlength ng-maxlength diperlukan ng-pattern dan teg lain

Untuk kotak input dalam borang, anda boleh menggunakan teg di atas untuk mengesahkan input pengguna.
Anda sudah tahu apa yang mereka maksudkan, secara literal.

<form name="yourForm">
<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

Anda boleh menggunakan $scope.yourForm.inputText.$error.required untuk menentukan sama ada kotak input kosong
Anda boleh menggunakan $scope.yourForm.inputText.$invalid untuk menentukan sama ada kandungan input memenuhi ng-pattern, ng-maxlength, maxlength
Kandungan input yang anda dapat melalui $scope.userNum mempunyai ruang kosong di hadapan dan di belakang dialih keluar kerana kewujudan ng-trim.

Keenam kotak lungsur teg ng-options

ng-options ialah teg yang dicipta khas untuk kotak lungsur.

Salin kod Kod adalah seperti berikut:

beff734fcc39347180b8ef38b836032c18bb6ffaf0152bbe49cd8a3620346341

Apa yang dipaparkan dalam kotak drop-down ialah person.name Apabila anda memilih salah satu daripada mereka, anda boleh mendapatkan person.id yang anda pilih melalui yourSelected.

Ketujuh Kawal teg gaya css ng

gaya ng membantu anda mengawal atribut css anda dengan mudah

<span ng-style="myColor">your color</span>

Anda boleh menukar kesan yang anda inginkan dengan memberikan nilai kepada myColor, seperti ini:

$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};

Kelapan Permintaan tak segerak objek $http

AngularJS menyediakan objek yang serupa dengan $.ajax jquery untuk permintaan tak segerak.
Operasi tak segerak sangat dihormati dalam AngularJS, jadi operasi $http semuanya tak segerak, tidak seperti jquery.ajax yang turut menyediakan parameter tak segerak.

$http({method : 'POST',params : { id:123}, data:{name:'john',age:27}, url : "/mypath"})
.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do anything what you want;
});

Jika anda membuat permintaan POST, data dalam params akan diletakkan di hujung URL untuk anda, dan data dalam data akan dimasukkan ke dalam badan permintaan.

Jika anda tidak boleh meletakkannya selepas membaca ini, kemudian gunakan ini pada projek anda sendiri!