angularjs中的資料繫結

魔豆發表於2016-02-01
AngularJS

這是一個最簡單的angularjs的例子，關於資料繫結的，大家可以執行一下，看看效果

 

<html ng-app>
<head>
<title>angularjs-include</title>
<script type="text/javascript" src="js/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" value="" /><br />
<div>Hello,{{name}}</div>
</body>
</html>

 

關於資料雙向繫結，有時候不需要實時同步，比如當輸入框失去焦點的時候才去更新div裡面的內容，這裡可以用上ng-model-options屬性來解決，將上面的程式碼稍做修改：

<html ng-app>
<head>
<title>angularjs-include</title>
<script type="text/javascript" src="js/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" value="" ng-model-options="{ updateOn: 'blur' }" /><br />
<div>Hello,{{name}}</div>
</body>
</html>

 或者改為每隔1秒來更新：

<html ng-app>
<head>
<title>angularjs-include</title>
<script type="text/javascript" src="js/angular/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" value="" ng-model-options="{ debounce: {default:1000} }" /><br />
<div>Hello,{{name}}</div>
</body>
</html>

 

相關文章