单击按钮保存表单中的数据

Save Data from form on button click

本文关键字：数据 表单 按钮 保存 单击      更新时间：2023-09-26

如何通过单击按钮保存表单中的数据?我不明白错误在哪里。按照计划，当您单击存储在变量"master"

中的字段中的数据时

例如，我使用这个教程:http://www.w3schools.com/angular/angular_forms.asp

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>   <div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="firstName"><br>
    <button ng-click="copyData()">Click Me!</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>
  <script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {uder.firstName};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
    $scope.copyData=function(){
        $scope.master1=angular.copy($scope.mas);
       $scope.copyData();
}
});
</script>
</body>
</html>

首先你有一个打字错误。替换{条件下。与{user.firstname}。

你应该花一些精力去理解作用域，以及如何使用你在作用域中声明的变量。

用ng-model="firstname"声明一个输入，但是在控制器上，您有一个带有属性firstname的用户对象。您应该将表单更改为:

<input type="text" ng-model="user.firstName"><br>
<button ng-click="reset()">RESET</button>
<button ng-click="copyData()">Click Me!</button>

和控制器

app.controller('formCtrl', function($scope) {
      $scope.user = { firstname:"", lastname:"" }; //init your user
      $scope.master = user.firstname; //or user object itself, dont understand what exactly you would like to achieve
      $scope.reset = function() {
           $scope.user = $scope.master; 
};
$scope.copyData=function(){ }//call your onclick event
     //set the data, that you want directly here. Recursion will not work.
关于作用域和窗体的更多信息肯定会对您有所帮助。

首先，有一些拼写错误，如$scope.mas和{uder.firstname}。

尽管你使用ng-model指令将属性分配给$scope对象，但在控制器中，你试图使用一个名为user的对象访问它，这在此时是未定义的。下面是你的代码

 First Name:<br>
            <input type="text" ng-model="user.firstName"><br>
            <button ng-click="reset()">
                RESET</button>
            <button ng-click="copyData()">
                Click Me!</button>
            </form>
            <p>
                form = {{user}}</p>
            <p>
                master = {{master}}</p>

控制器应该是

 $scope.reset = function() {
                    $scope.user = angular.copy($scope.master);
                };
                 $scope.reset();
                $scope.copyData = function () {
                 $scope.master = user.firstName;
                $scope.master1=angular.copy($scope.master);
                $scope.copyData();
               };

感谢大家!工作版本:

(function(angular) {
  'use strict';
angular.module('scopeExample', [])
  .controller('MyController', ['$scope', function($scope) {
    $scope.username = 'World';
    $scope.sayHello = function() {
      $scope.greeting = 'Hello ' + $scope.username + '!';
    };
  }]);
})(window.angular);
-<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular JS</title>
   <link rel="stylesheet" type="text/css" href="style.css">
  <script src="angular.min.js"></script>
    <script  src="weather 2.js"></script>
  </head>
  <body ng-app="scopeExample">
    <div ng-controller="MyController">
    Your name:
      <input type="text" ng-model="username">
      <button ng-click='sayHello()'>greet</button>
    <hr>
    {{greeting}}
  </div>
  </body>
  </html>

相关文章：