javascript - 使用 Angular Material 和 JavaScript 开发数据输入应用程序

Question

我想使用 Angular Material Design、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 绑定(bind)到表。它应该是 entry.name、entry.email 等

然后，您只需将 $scope.user = {} 或 $scope.user = null 添加到您的 $scope.add函数清除表单字段。

这是固定的 CodePen:https://codepen.io/anon/pen/gXExoM