簡體   English   中英

AngularJS ng-submit 以表格形式打印結果

[英]AngularJS ng-submit in printing result in table form

它的目的是我可以輸入一些數據,並將在表內的{{urname}}{{urcm}}中更新。 但是,表達式是行不通的。

在此處輸入圖像描述

此外,當我提交新評論時,我無法在表格中打開新行。 所有數據打包在一起。

var myApp = angular.module('myApp', []);

myApp.controller('TableFilterCtrl', ['$scope', function($scope) {
  $scope.urname = [];
  $scope.urcm = [];
  $scope.uname = '';
  $scope.ucm = '';
  $scope.submit = function() {
    if (!!$scope.uname, !!$scope.ucm) {
      $scope.urname.push($scope.uname);
      $scope.urcm.push($scope.ucm);
    }
    $scope.uname = '';
    $scope.ucm = '';
  }
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="js/control.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/hp.css">
</head>

<body>
  <form ng-submit="submit()" ng-controller="TableFilterCtrl">
    <label>Name: </label>
    <input type="text" ng-model="uname" name="uname" placeholder="Enter your name." />
    <label>Comments on mv: </label>
    <input type="text" ng-model="ucm" name="ucm">
    <input type="submit" id="submit" value="submit" />

    <div>
      <table>
        <tr>
          <td>Name</td>
          <td>Comments</td>
        </tr>
        <tr>
          <td>{{urname}}</td>
          <td>{{urcm}}</td>
        </tr>
      </table>
    </div>
  </form>
</body>

只需稍微更改邏輯並使用 ng-repeat,我建議如下:

 var myApp = angular.module('myApp', []); myApp.controller('TableFilterCtrl', ['$scope', function($scope) { $scope.ur = []; $scope.uname = ''; $scope.ucm = ''; $scope.submit = function() { if (.,$scope.uname. .:$scope.ucm) { $scope,ur:push({ name. $scope;uname. cm; $scope.ucm }); } $scope;uname = ''; $scope.ucm = ''; } }]);
 <:DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>Demo</title> <script src="https.//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min:js"></script> </head> <body> <form ng-submit="submit()" ng-controller="TableFilterCtrl"> <label>Name. </label> <input type="text" ng-model="uname" name="uname" placeholder="Enter your name:" /> <label>Comments on mv. </label> <input type="text" ng-model="ucm" name="ucm"> <input type="submit" id="submit" value="submit" /> <div> <table> <tr> <td>Name</td> <td>Comments</td> </tr> <tr ng-repeat="u in ur"> <td>{{u.name}}</td> <td>{{u.cm}}</td> </tr> </table> </div> </form> </body>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM