【AngularJs-模块篇-Form篇】

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 65 阅读

文章标签：

#javascript #ViewUI

本文介绍了AngularJS的基础用法，包括如何使用模块初始化应用，通过控制器绑定数据到视图，并利用表单控件实现数据交互。文章还展示了如何通过ng-model进行双向数据绑定，以及如何使用自定义函数响应用户操作。

1、模块

<!doctype html>
<html lang="en-US" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> -->
    <script src="../angular.min.js"></script>
    <script type="text/javascript">
       var myAppModule=angular.module('myApp',[])  ;
        myAppModule.controller('TextController',function($scope){
            var someText={};
            someText.message="you have started";
            $scope.someText=someText;

        }) ;
        //ng-bind和{{someText}}具有相同功能
    </script>
</head>
<body ng-controller="TextController">
                                  <p ng-bind="someText"></p>
          <input type="text" value="{{someText.message}}">
</body>
</html>

View Code

2、Form控件绑定（未完成）

<!doctype html>
<html lang="en-US" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> -->
    <script src="../angular.min.js"></script>
    <script type="text/javascript">

        var myAppModule=angular.module('myApp',[])  ;
        myAppModule.controller('StartUpController',function($scope){
            $scope.computeNeeded=function(){
                $scope.needed=$scope.startingEstimate*10;
            };
            $scope.requestFunding=function(){
                window.alert("sorry,please get moure cutomers first");
            };
            $scope.reset=function(){
                $scope.startingEstimate=0;
            } ;

        }) ;


    </script>
</head>
<body>
<form ng-submit="requestFunding()"  ng-controller="StartUpController">
      Starting:<input ng-change="computeNeeded()" ng-model="startingEstimate">
    Recommendation:{{needed}}
    <button>Fund my startup!</button>
    <button ng-click="reset()" value="reset">reset</button>
   

</form>

</body>
</html>

View Code