資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚學
法律學AngularJS – ng-change 指令
AngularJS 中的 ng-change 指令會在使用者更改輸入時評估給定的表示式。每次進行更改後，ngChange 指令都會被執行，並立即評估該表示式。JavaScript onChange 事件僅在更改結束時觸發（當用戶離開表單元素或按 <Enter> 鍵時）。
注意− 此指令還需要 ngModel。
語法
<element ng-change="expression">..Content..</element>
示例 − ngChange 指令
在您的 Angular 專案目錄中建立一個檔案 "ngChange.html"，然後複製貼上以下程式碼段。
<!DOCTYPE html>
<html>
<head>
<title>ngChange Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color:green">
Welcome to Tutorials Point
</h1>
<h2>
AngularJS | ngChange Directive
</h2>
<div ng-app="demo" ng-controller="app">
Check to show/hide details
<input type="checkbox" ng-change="show()" ng-model="check">
<br><br>
<div style="padding:50px; margin-left: auto; margin-right: auto; border:1px solid black; width:30%;color:green" ng-show='result'>
Start Learning the new Angular JS features now...
</div>
</div>
<!-- Script for passing the values and checking... -->
<script>
var app = angular.module('demo', []);
app.controller('app', function ($scope) {
$scope.show = function () {
if ($scope.check == true)
$scope.result = true;
else
$scope.result = false;
}
});
</script>
</body>
</html>輸出
要執行以上程式碼，只需轉到您的檔案並將它作為正常 HTML 檔案執行即可。您將在瀏覽器視窗中看到以下輸出。
示例 2
在您的 Angular 專案目錄中建立一個檔案 "ngChange.html"，然後複製貼上以下程式碼段。
<!DOCTYPE html>
<html>
<head>
<title>ngChange Directive</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color:green">
Welcome to Tutorials Point
</h1>
<h2>
AngularJS | ngChange Directive
</h2>
<div ng-app="demo" ng-controller="prop">
<div>
Are you a developer:
<input type="checkbox" ng-model="isTrue" ng-change="cnt=cnt+1" ng-init="cnt=0"/>
</div>
Count: {{cnt}}
<pre>{{isTrue}}</pre>
</div>
<!-- Script for passing the values and checking... -->
<script>
var app = angular.module("demo", []);
app.controller('prop', ['$scope', function ($app) {
$app.isTrue = false;
}]);
</script>
</body>
</html>輸出
要執行以上程式碼，只需轉到您的檔案並將它作為正常 HTML 檔案執行即可。您將在瀏覽器視窗中看到以下輸出。
更新於： 08-Oct-2021
701 瀏覽量
廣告