Question

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

中的字段中的数据时

例如，我使用本教程：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>

Answer 1

首先，你有一个拼写错误。将 {uder.firstname} 替换为 {user.firstname} 。

您应该花一些精力来理解范围以及如何使用您在范围上声明的变量。

使用 ng-model =＆＃34; firstname＆＃34; 声明输入，但在控制器上有一个属性为 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的更多信息绝对可以帮助您。

Answer 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();
               };

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

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

3 个答案: