Question

输入字段不应直接更新字段（这意味着当我在输入框中输入时，您不应该看到徽章字段更新 - 只有在按下提交按钮后才填充字段）。

// index.html的

const OutlineButton = (props) => {
  const navigationButton_OnClick = (event) => {
    /* Do something */
  };

  return(
    <TouchableHighlight underlayColor='rgba(0,0,0,0)' onPress={navigationButton_OnClick}>
       /* Do something */
    </TouchableHighlight>
  )  
};

这是我的app.js

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
    <meta charset="UTF-8">
    <title>Name Badge</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="MainController">
   <div class="container">
       <div class="row">
           <div class="col-md-6">
               <input class="text" placeholder="First Name" ng-model="fName"><br>
               <input class="text" placeholder="Email" ng-model="email"><br>
               <input class="text" placeholder="Phone" ng-model="phone">
           </div>
           <div class="col-md-6">
               <input class="text" placeholder="Last Name" ng-model="lName"><br>
               <input class="text" placeholder="Place of Birth" ng-model="birth"><br>
               <input class="text" placeholder="Favorite Food" ng-model="food">
           </div>
       </div>
       <textarea ng-model="about">Tell us about yourself</textarea><br>
       <button class="btn" type="submit" ng-submit="info()">Submit</button>

       <br><br>


       <br><br><br><br>
       <div class="row">
           <div class="col-xs-6">
               <h3>Name: {{fName}} {{lName}}</h3>
               <h3>Place of Birth: {{birth}}</h3>
               <h3>Email: {{email}}</h3>
           </div>
           <div class="col-xs-6">
               <h3>Phone: {{phone}}</h3>
               <h3>Favorite Food: {{food}}</h3>
           </div>
       </div>
       <textarea>{{about}}</textarea>

   </div>


   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
   <script src="app.js"></script> 
</body>
</html>

有人可以查看我的代码并帮助我查看错误。

Answer 1

    <!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
    <meta charset="UTF-8">
    <title>Name Badge</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="MainController">
   <div class="container">
       <div class="row">
           <div class="col-md-6">
               <input class="text" placeholder="First Name" ng-model="fName"><br>
               <input class="text" placeholder="Email" ng-model="email"><br>
               <input class="text" placeholder="Phone" ng-model="phone">
           </div>
           <div class="col-md-6">
               <input class="text" placeholder="Last Name" ng-model="lName"><br>
               <input class="text" placeholder="Place of Birth" ng-model="birth"><br>
               <input class="text" placeholder="Favorite Food" ng-model="food">
           </div>
       </div>
       <textarea ng-model="about">Tell us about yourself</textarea><br>
       <button class="btn" type="submit" ng-submit="info()">Submit</button>

       <br><br>


       <br><br><br><br>
       <div class="row">
           <div class="col-xs-6">
               <h3>Name: {{fName1}} {{lName1}}</h3>
               <h3>Place of Birth: {{birth1}}</h3>
               <h3>Email: {{email1}}</h3>
           </div>
           <div class="col-xs-6">
               <h3>Phone: {{phone1}}</h3>
               <h3>Favorite Food: {{food1}}</h3>
           </div>
       </div>
       <textarea>{{about}}</textarea>

   </div>


   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
   <script src="app.js"></script> 
</body>
</html>

js文件是

var app = angular.module("MyApp", []);

app.controller("MainController", ['$scope', function ($scope) {
$scope.info = function () {


    $scope.fName1 =   $scope.fName1;
    $scope.email1 =  $scope.email;
    $scope.phone1 = $scope.phone;
    $scope.lName1 = $scope.lName;
    $scope.birth1 =  $scope.birth;
    $scope.food1 =  $scope.food;
    $scope.about1 =  $scope.about;

}


}])

输入字段更新在angularjs中单击提交按钮后

1 个答案: