0

Есть форма где мы можем ввести данные. Эти данные после отправки добавляются в таблицу. Как сделать, чтобы данные которые мы ввели форму сохранялись в local storage ? То есть нужно, чтобы после перезагрузки те данные, что мы добавили через форму остались в таблице. Как это реализовать?

Plunker

var helloApp = angular.module("helloApp", []);
helloApp.controller("CompanyCtrl", function($scope) {
    $scope.companies = [{
            'name': 'Infosys Technologies',
            'employees': 125000,
            'headoffice': 'Bangalore'
        },
        {
            'name': 'Cognizant Technologies',
            'employees': 100000,
            'headoffice': 'Bangalore'
        },
        {
            'name': 'Wipro',
            'employees': 115000,
            'headoffice': 'Bangalore'
        },
        {
            'name': 'Tata Consultancy Services (TCS)',
            'employees': 150000,
            'headoffice': 'Bangalore'
        },
        {
            'name': 'HCL Technologies',
            'employees': 90000,
            'headoffice': 'Noida'
        },
    ];
    $scope.addRow = function() {
        $scope.companies.push({ 'name': $scope.name, 'employees': $scope.employees, 'headoffice': $scope.headoffice });
        $scope.name = '';
        $scope.employees = '';
        $scope.headoffice = '';
    };
})

<!DOCTYPE html>
<html ng-app="helloApp">

  <head>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

<body ng-controller="CompanyCtrl">
    <table class="table">
        <tr>
            <th>Name
            </th>
            <th>Employees
            </th>
            <th>Head Office
            </th>
        </tr>
        <tr ng-repeat="company in companies">
            <td>{{company.name}}
            </td>
            <td>{{company.employees}}
            </td>
            <td>{{company.headoffice}}
            </td>
        </tr>
    </table>
    <form class="form-horizontal" role="form" ng-submit="addRow()">
        <div class="form-group">
            <label class="col-md-2 control-label">Name</label>
            <div class="col-md-4">
                <input type="text" class="form-control" name="name" ng-model="name" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">Employees</label>
            <div class="col-md-4">
                <input type="text" class="form-control" name="employees" ng-model="employees" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">Headoffice</label>
            <div class="col-md-4">
                <input type="text" class="form-control" name="headoffice" ng-model="headoffice" />
            </div>
        </div>
        <div class="form-group">
            <div style="padding-left:110px">
                <input type="submit" value="Submit" class="btn btn-primary" />
            </div>
        </div>
    </form>
</body>

</html>

2
  • А вы уверены, что надо делать через localStorage? Может все таки в базе данных надо сохранять? Commented 10 окт. 2017 в 12:01
  • В моем случае надо в localStorage Commented 10 окт. 2017 в 12:27

1 ответ 1

0

В ангуляре с localStorage можно работать как обычно.

Но для удобства можно использовать ngStorate.

Пример на plunker.

К сожалению, сниппет не работает. Но код в нем 100% рабочий.

var helloApp = angular.module("helloApp", ['ngStorage']);
helloApp.controller("CompanyCtrl", function($scope, $localStorage) {
  $localStorage.$default({
    companies: [] // устанавливаем значение по умолчанию. Если в localStorage нету companies, он создаться пустым массивом
  });
  $scope.companies = $localStorage.companies; // присваиваем к $scope наш массив. Он или пустой или с данными.
  $scope.addRow = function() {
    $scope.companies.push({
      'name': $scope.name,
      'employees': $scope.employees,
      'headoffice': $scope.headoffice
    }); // когда обновляется содержмиое массива, будет перезаписываться значение в localStorage
    $scope.name = '';
    $scope.employees = '';
    $scope.headoffice = '';

  };
})
<!DOCTYPE html>
<html ng-app="helloApp">

<head>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="CompanyCtrl">
  <table class="table">
    <tr>
      <th>Name
      </th>
      <th>Employees
      </th>
      <th>Head Office
      </th>
    </tr>
    <tr ng-repeat="company in companies">
      <td>{{company.name}}
      </td>
      <td>{{company.employees}}
      </td>
      <td>{{company.headoffice}}
      </td>
    </tr>
  </table>
  <form class="form-horizontal" role="form" ng-submit="addRow()">
    <div class="form-group">
      <label class="col-md-2 control-label">Name</label>
      <div class="col-md-4">
        <input type="text" class="form-control" name="name" ng-model="name" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">Employees</label>
      <div class="col-md-4">
        <input type="text" class="form-control" name="employees" ng-model="employees" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-2 control-label">Headoffice</label>
      <div class="col-md-4">
        <input type="text" class="form-control" name="headoffice" ng-model="headoffice" />
      </div>
    </div>
    <div class="form-group">
      <div style="padding-left:110px">
        <input type="submit" value="Submit" class="btn btn-primary" />
      </div>
    </div>
  </form>
</body>

</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.