1

Пытаюсь немного осовременить данный код в синтаксис controller as . Plunker1

var helloApp = angular.module("helloApp", ['ngStorage']);
helloApp.controller("CompanyCtrl", function($scope, $localStorage) {
  $localStorage.$default({
    companies: []
  });
  $scope.companies = $localStorage.companies;
  $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="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>

Я сделал это такPlunker2

var helloApp = angular.module("helloApp", ['ngStorage']);
helloApp.controller("MainCtrl", function($localStorage) {
  $localStorage.$default({
    companies: []
  });
  this.companies = $localStorage.companies;
  this.addRow = function() {
    this.companies.push({
      'name': this.name,
      'employees': this.employees,
      'headoffice': this.headoffice
    });
    this.name = '';
    this.employees = '';
    this.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="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/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="MainCtrl as main">
    <table class="table">
        <tr>
            <th>Name
            </th>
            <th>Employees
            </th>
            <th>Head Office
            </th>
        </tr>
        <tr ng-repeat="company in main.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>

Но мой пример не работает. Что я сделал не так? Как правильно изменить код?

1
  • Перепишите this.addRow = function() { на this.addRow = ()=> {. А также ng-submit="addRow()" на ng-submit="main.addRow()" 11 окт 2017 в 3:14

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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