单击按钮时保存表单中的数据答案

【问题标题】：Save Data from form on button click单击按钮时保存表单中的数据
【发布时间】：2016-11-18 11:50:13
【问题描述】：

如何通过点击按钮保存表单中的数据？我不明白错误在哪里。按计划，当您单击存储在变量“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>

【问题讨论】：

你到底想在这里做什么？
点击“点击我！”保存表单中的数据
您要保存哪些数据以及保存在哪里？
城市名称。字符串数据。
请浏览 w3schools 链接中提供的文档。您已将名字作为输入，并且您需要城市？

标签： javascript angularjs webforms

【解决方案1】：

首先你有一个拼写错误。将 {uder.firstname} 替换为 {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和forms的信息绝对可以帮到你。

【讨论】：

【解决方案2】：

首先，有一些拼写错误，例如$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();
               };

【讨论】：

【解决方案3】：

谢谢大家！一个工作版本：

(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>

【讨论】：