使用角度材质和javascript开发数据输入应用程序

Question

我想使用角度素材设计构建应用，angularjs（在HTML）和javascript，一旦提交，它就会输入（姓名，地点，电话号码和电子邮件）它必须存储在它下面的表格中。

链接到codepen中的工作 https://codepen.io/anon/pen/QOoEyW

我尝试了各种方法来实现代码。该表还应具有删除整个条目和编辑输入条目的解决方案。我用这里提供的代码尝试了很多。我能够输入数据但无法在提交后清除数据

angular
  .module('MyApp', ['ngMaterial'])
  .controller('DemoCtrl', function($scope) {
    $scope.dataArray = [];
    $scope.add = function(data) {
      $scope.dataArray.push(data);
      $scope.data = null;
    }
    $scope.delete = function(index) {
      $scope.dataArray.splice(index, 1);
    }
  })
  .config(function($mdThemingProvider) {
    $mdThemingProvider.theme('docs-dark', 'default')
      .primaryPalette('yellow')
      .dark();
  });

<div ng-controller="DemoCtrl" layout="column" ng-app="MyApp">
  <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding="">
    <md-input-container>
      <label>Name</label>
      <input ng-model="user.name" required="">
    </md-input-container>
    <md-input-container>
      <label>Place</label>
      <input ng-model="user.place" type="place" required="">
    </md-input-container>
    <md-input-container>
      <label>Email</label>
      <input ng-model="user.email" type="email" required="">
    </md-input-container>
    <md-input-container>
      <label>Phone</label>
      <input name="phoneNumber" ng-model="user.number" required="" ng-pattern="/^[0-9]{10}$/" md-maxlength="10">
    </md-input-container>
  </md-content>
  <section layout="column" layout-sm="column" layout-align="center center" layout-wrap>
    <md-button ng-click="add(data)" class="md-raised md-primary">Click to Add</md-button>
  </section>
  <table>
    <th width="20%">Name</th>
    <th width="20%">Place</th>
    <th width="30%">E-mail</th>
    <th width="20%">Number</th>
    <th width="10%">Remove</th>
    <tr data-ng-repeat="entry in dataArray  track by $index">
      <td data-ng-bind="user.name"></td>
      <td data-ng-bind="user.place"></td>
      <td data-ng-bind="user.email"></td>
      <td data-ng-bind="user.number"></td>
      <td data-ng-click="delete(dataArray.indexOf(entry))"><a style="cursor:pointer;color:red">click</a></td>
    </tr>
    <table>

请为我提供正确的代码。请更正提供的代码

Answer 1

您的代码有几个问题。

<强>首先

<md-button ng-click="add(data)" class="md-raised md-primary">Click to Add</md-button>

您的函数调用为add(data)时应为add(user)

<强>第二

<tr data-ng-repeat="entry in dataArray  track by $index">

您有data-ng-repeat="entry in dataArray，但您使用user绑定到表格。它应该是entry.name，entry.email等。

然后，您只需将$scope.user = {}或$scope.user = null添加到$scope.add功能即可清除表单字段。

以下是固定的CodePen：https://codepen.io/anon/pen/gXExoM