クリアボタンの角度JS

クリアボタンをクリックしたときにテキストフィールドをクリアしようとしています。ここで私のシステムで試したコードがありますが、私はまだ結果を得ていません。私がAngularに慣れていないので、私は愚かな間違いをお詫びします。クリアボタンの角度JS

HTMLコード

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Creation Form</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script src="../controllers/clearbutton.js"></script> 
    </head> 

    <body> 

     <div class="container"> 
      <h2 style="text-align: center"><b>Create User</b></h2> 

      <div class="panel-group" id="accordion"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h4 class="panel-title" style="text-align: center"> 


          Enter your details 
         </h4> 
        </div> 

        <div class="panel-body"> 

         <div class="row" ng-app="myApp" ng-controller="clear"> 


          <div class="col-sm-4 form-group col-md-4 col-xs-12"> 
           <div class="input-group"> 
            <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div> 
            <input type="text" class="form-control" placeholder="Name" name="callername" ng-model="callername"/> 
           </div> 
          </div> 

          <div class="col-sm-4 form-group col-md-4 col-xs-12"> 
           <div class="input-group"> 

            <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div> 
            <input type="text" class="form-control" placeholder="User Code" name="usercode" ng-model="usercode" /> 

           </div> 
          </div> 



          <div class="col-sm-4 form-group col-md-4 col-xs-12"> 
           <div class="input-group"> 
            <div class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></div> 
            <input type="text" class="form-control" placeholder="Email" name="email" ng-model="email" /> 
           </div> 
          </div> 
         </div> 
    <div class="pull-right"> 

          <button type="submit" class="btn btn-primary ">Invite</button> 

          <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button> 

         </div> 
        </div> 
       </div> 

      </div> 
     </div> 
    </body> 
    </html>

角度JSコード

angular.module('myApp', []) 
     .controller('clear', ['$scope', function ($scope) { 

      $scope.clear = function() { 
       $scope.callername = ""; 
       $scope.volunteercode = ""; 
       $scope.email = ""; 
       console.log($scope.callername); 
       console.log($scope.usercode); 
       console.log($scope.email); 
      }; 

     }]);

出典

2016-12-29 beginner

ここで明確な関数を呼び出していますか？ – SaiUnique

あなたは 'クリア 'ボタンを使ってどこを見ることができませんか？ 'user：{'allername'：' '、' volunteercode '：' '...}'のようなもので、より良いアプローチです。 –

クリアボタンはどこですか？ – Jigar7521

あなたは明確な関数内の適切NG-モデルの変数を使用していないとクリアボタンがあまりにも欠けていました。このようにしてみてください。

angular.module('myApp', []) 
 
    .controller('clear', ['$scope', 
 
    function($scope) { 
 

 
     $scope.clear = function() { 
 
     console.log($scope.callername); 
 
     console.log($scope.usercode); 
 
     console.log($scope.email); 
 
     $scope.callername = ""; 
 
     $scope.usercode = ""; 
 
     $scope.email = ""; 
 

 
     }; 
 

 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Creation Form</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="../controllers/clearbutton.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 
    <h2 style="text-align: center"><b>Create User</b></h2> 
 

 
    <div class="panel-group" id="accordion"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h4 class="panel-title" style="text-align: center"> 
 

 

 
          Enter your details 
 
         </h4> 
 
     </div> 
 

 
     <div class="panel-body"> 
 

 
      <div class="row" ng-app="myApp" ng-controller="clear"> 
 

 

 
      <div class="col-sm-4 form-group col-md-4 col-xs-12"> 
 
       <div class="input-group"> 
 
       <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i> 
 
       </div> 
 
       <input type="text" class="form-control" placeholder="Name" name="callername" ng-model="callername" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-sm-4 form-group col-md-4 col-xs-12"> 
 
       <div class="input-group"> 
 

 
       <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i> 
 
       </div> 
 
       <input type="text" class="form-control" placeholder="User Code" name="usercode" ng-model="usercode" /> 
 

 
       </div> 
 
      </div> 
 

 

 

 
      <div class="col-sm-4 form-group col-md-4 col-xs-12"> 
 
       <div class="input-group"> 
 
       <div class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i> 
 
       </div> 
 
       <input type="text" class="form-control" placeholder="Email" name="email" ng-model="email" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-sm-4 form-group col-md-4 col-xs-12"> 
 
       <div class="input-group"> 
 
       <input type="button" value="clear" class="btn btn-primary" ng-click="clear()" /> 
 

 
       </div> 
 
      </div> 
 

 
      </div> 
 

 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</body> 
 

 

 
</html>

ここ

出典

2016-12-29 05:15:30 Jigar7521

ありがとうございます。完璧に働く.. – beginner

は私が作ったテストであり、その作業が、私はあなたが角1.5以上とない2

<div ng-app="myApp" ng-controller="myCtrl"> 
Name: <input ng-model="name"> 

<input type=button ng-click=clear() value="clear"> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.name = "John Doe"; 

    $scope.clear = function() { 
     $scope.name = ""; 
    } 
}); 
</script>

使用していると仮定していますクリックイベントをボタンにバインドするには、ng-clickを使用する必要があります。

出典

2016-12-29 05:16:05

コードに問題があります。コントローラーの範囲外にボタンを定義しました。コントローラ&ルートは、それは、コントローラの下ではありません別のdivに定義されてい

<div class="row" ng-app="myApp" ng-controller="clear">

ボタンで定義されました。これは結果が得られない理由です

これを試してください。

<html ng-app="myApp"> 
<body ng-controller="clear">

結果が表示されます。

出典

2016-12-29 05:33:09 ravikumar533

答えて

関連する問題