入力フィールドの更新anglejsのAFTER送信ボタンがクリックされました

入力フィールドはフィールドを直接更新しないでください（入力ボックスに入力すると、バッジフィールドの更新は表示されないはずです - 送信ボタンを押した後でのみポピュレートする）。入力フィールドの更新anglejsのAFTER送信ボタンがクリックされました

//index.html

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

はここで誰かが私のコードを見て、私は間違っているものを参照してください助けることができる私のapp.js

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

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


    $scope.fName = fName; 
    $scope.email = ''; 
    $scope.phone = ''; 
    $scope.lName = ''; 
    $scope.birth = ''; 
    $scope.food = ''; 
    $scope.about = ''; 

} 


}])

です。

出典

2016-09-15 Saia Fonua

<!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; 

} 


}])

出典

2016-09-15 19:14:25 Gangz

です。 – Gangz

本当に？別のコントローラやサービスを作成するのと同じですか？ –

いいえ、別のオブジェクトを作成します。 – Gangz

入力フィールドの更新anglejsのAFTER送信ボタンがクリックされました

答えて

関連する問題