입력란 업데이트 angleJs 후 제출 버튼을 클릭

입력란을 직접 업데이트하면 안됩니다. 입력란을 입력하면 배지 필드 업데이트가 표시되지 않아야합니다. 제출 버튼을 누른 후에 만 채우기).입력란 업데이트 angleJs 후 제출 버튼을 클릭

//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 후 제출 버튼을 클릭

답변

관련 문제