angularjs-雙向數據綁定之輸入框信息隨時顯示


以下為angularjs 雙向數據綁定用處之一:用戶輸入框輸入信息,隨着用戶信息的輸入,信息隨時顯示在某元素中

雙向數據綁定如果不需要對輸入數據有任何操作,只是把用戶輸入的信息顯示在頁面中,則不需要對<div ng-app=''>里面寫任何任內,只需要謝偉空字符即可;一個為用戶輸入信息元素綁定ng-model='起的名字',顯示元素為綁定方式為以下兩種方式都可實現

方式一:ng-bind='名字'

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>雙向數據綁定兩種方式</title>
    <script src="angular.js"></script>
</head>
<body >
<div ng-app="">
    <input type="text" ng-model="name"/>
    <h3>以下為ng-bind方式</h3>
    <div ng-bind="name"></div>  <!--ng-bind方式-->
</div>
</body>
</html>
方式二:花括號形式 {{名字}}
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>雙向數據綁定兩種方式</title>
    <script src="angular.js"></script>
</head>
<body >
<div ng-app="">
    <input type="text" ng-model="name"/>
    <h3>以下為花括號方式</h3>
  <div>{{name}}</div>  <!--花括號方式-->
</div>
</body>
</html>

 

顯示結果為:

雙向數據綁定的這種方式實現了隨改隨時顯示的功能,不需要進行繁瑣的js或者js操作


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM