کار با event ها در آنگولار

AngularJS دستورات رویدادهای HTML خود را دارد.

مقالات

رویدادهای آنگولار – Angularjs events

شما می توانید listeners رویداد AngularJS را به عناصر HTML خود اضافه کنید با استفاده از یک یا چند مورد از این دستورات:

ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste

directives های events به ما اجازه می دهد تا توابع AngularJS را در رویدادهای کاربر خاص اجرا کنیم.

رویداد AngularJS یک رویداد HTML را بازنویسی نخواهد کرد، هر دو رویداد اجرا خواهند شد.

Mouse Events

رویدادهای ماوس زمانی رخ می دهد که مکان نما cursor بیش از یک عنصر را در این ترتیب حرکت می دهد:

ng-mouseenter
ng-mouseover
ng-mousemove
ng-mouseleave

یا وقتی دکمه ی ماوس بر روی عنصر کلیک می شود، در این ترتیب :

ng-mousedown
ng-mouseup
ng-click

شما می توانید رویدادهای موس را به هر عنصر HTML که می خواهید اضافه کنید.

مثال:

وقتی که ماوس روی عنصر H1 حرکت می کند، متغیر شمارش را افزایش دهید:

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.count = 0;

});

</script>

ng-click Directive

دستور ng-click کد AngularJS را تعریف می کند که وقتی عنصر روی آن کلیک می شود اجرا می شود.

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>
You can also refer to a function:

E

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.count = 0;

});

</script>

You can also refer to a function:

یا شما می توانید به تابع اشاره کنید:

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
    $scope.myFunction = function() {
        $scope.count++;
    }
});
</script>

<button ng-click="myFunction()">Click me!</button>

<p>{{ count }}</p>

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.count = 0;

$scope.myFunction = function() {

$scope.count++;

}

});

</script>

Toggle, True/False

اگر می خواهید یک بخش از کد HTML را هنگامی که یک دکمه روی آن کلیک می کنید نشان دهد و هنگامی که دکمه دوباره کلیک می شود، مانند یک منوی کشویی پنهان شود، دکمه را مانند یک سوئیچ تغییر دهید:

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
    <h1>Menu:</h1>
    <div>Pizza</div>
    <div>Pasta</div>
    <div>Pesce</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showMe = false;
    $scope.myFunc = function() {
        $scope.showMe = !$scope.showMe;
    }
});
</script>

<button ng-click="myFunc()">Click Me!</button>

<div>Pizza</div>

<div>Pasta</div>

<div>Pesce</div>

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.showMe = false;

$scope.myFunc = function() {

$scope.showMe = !$scope.showMe;

}

});

</script>

متغیر showMe از مقدار false بولین شروع می شود.

تابع myFunc متغیر showMe را با مخالف بودن آن با استفاده از! (نه) اپراتور.

object $event

شما می توانید از شی $event به عنوان یک value هنگام فراخوانی تابع استفاده کنید.

شی $event حاوی event مرورگر است:

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<p>Coordinates: {{x + ', ' + y}}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.myFunc = function(myE) {
        $scope.x = myE.clientX;
        $scope.y = myE.clientY;
    }
});
</script>

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<p>Coordinates: {{x + ', ' + y}}</p>

</div>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.myFunc = function(myE) {

$scope.x = myE.clientX;

$scope.y = myE.clientY;

}

});

</script>

5/5 - (1 امتیاز)

کار با event ها در آنگولار – AngularJS Events

رویدادهای آنگولار – Angularjs events

Mouse Events

ng-click Directive

Toggle, True/False

object $event

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

رویدادهای آنگولار – Angularjs events

Mouse Events

ng-click Directive

Toggle, True/False

object $event

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

ساخت انیمیشن با انگولار – angularjs animation

AngularJS Includes

api آنگولار جی اس – Angularjs API

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

ساخت form با آنگولار جی اس – angular forms

دیدگاهتان را بنویسید لغو پاسخ