angularjs双向绑定
angularjs双向绑定
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <title>index</title> 7 <link href="{$Think.const.CSSURL}bootstrap.min.css" rel="stylesheet" type="text/css"/> 8 <script src="{$Think.const.JS}jquery.min.js" type="text/javascript"></script> 9 <script src="{$Think.const.JS}bootstrap.min.js" type="text/javascript"></script> 10 <script src="{$Think.const.JS}angular.min.js" type="text/javascript"></script> 11 <link href="{$Think.const.CSSURL}home/index.css" rel="stylesheet" type="text/css"/> 12 </head> 13 <body ng-app="myapp" ng-controller="myctrl"> 14 <div class="container"> 15 <h1 class="page-header">前端技术方案</h1> 16 <form action=""> 17 <div class = "from-group"> 18 <label for="">请留言:</label> 19 <input type="text" class="form-control" ng-model="mess"> 20 </div> 21 <div class="well">留言内容: <span ng-bind="mess"></span></div> 22 </form> 23 <img src="{$Think.const.HOMEIMG}/01.png" /> 24 </div> 25 </body> 26 <script> 27 angular.module("myapp",[]).controller("myctrl",function($scope){ 28 $scope.mess = "双向绑定"; 29 }); 30 </script> 31 </html>