Question

我正在开发第一个有角度的应用程序，我想构建一个快速网站，让朋友将他们的名字添加到列表中。我能够创建表单/列表，但我不确定如何确保保留数据。我试图找到一种方法发送到某个地方的文本文件或数组，但不知道如何创建该部分。再一次，我是新人并且正在寻找一种入门方式。

我创建了一个Plunker预览版来帮助说明我的问题：

http://plnkr.co/edit/oUygsUnoKKJgL4FI1rFV?p=preview

    <!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script data-require="angular.js@1.3.7" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
  <style>
    body {
      padding-top: 50px;
    }
    form {
      margin-bottom: 50px;
    }
  </style>
</head>

<body ng-app="formApp" ng-controller="formController" class="container">

    <form name="satellite" class="form-horizontal">
      <table class="table">
        <tr>
          <td>Name:</td>
          <td>
            <input type="text" ng-model="item.Name" />
          </td>
        </tr>
        <tr>
          <td>Email:</td>
          <td>
            <input type="text" placeholder="add if not on email list" ng-model="item.Email" />
          </td>
        </tr>
        <tr>
          <td>Prefered Date:</td>
          <td>
            <input placeholder="mm/dd" ng-model="item.Date" name="date" ng-pattern='/^[0,1]?\d{1}\/(([0-2]?\d{1})|([3][0,1]{1}))/' />
            <span ng-show="satellite.date.$error.pattern">Incorrect Format, should be MM/DD</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">
            <input type="Button" value="Add" ng-click="addItem(item)" />
          </td>
        </tr>
      </table>
    </form>
    <br />
    <table border="1" class="table table-striped table-hover">
      <thead>
        <tr>
          <td width="150">Name</td>
          <td>Prefered Date</td>
          <td>Email Address</td>
          <td>Remove Item</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in items">
          <td>{{item.Name}}</td>
          <td>{{item.Date}}</td>
          <td>{{item.Email}}</td>
          <td>
            <input type="button" value="Remove" ng-click="removeItem($index)" />
          </td>
        </tr>
      </tbody>
    </table>
    <br />
    <br />
</body>

</html>

的script.js

＆＃13;

var formApp = angular.module('formApp', [])

.controller('formController', function($scope) {

  $scope.items = [];

  $scope.addItem = function(item) {
    $scope.items.push(item);
    $scope.item = {};
  }
  
  $scope.getTotalPlayers = function() {
    return $scope.items.length;
  };

  $scope.removeItem = function(index) {
    $scope.items.splice(index, 1);
  }
  
  function MyCtrl($scope) {}

});

＆＃13;

如果需要任何其他信息，请告诉我。我已将Plunker中的代码复制到我的Gmail驱动器并进行了测试，但每次添加名称并关闭浏览器并返回页面时，所有数据都会丢失。

希望这很简单。

干杯，

第一个Angular应用程序，需要帮助创建输入表单/列表，维护列表，不显示页面加载

0 个答案: