изменение объектов модели внутри контроллеров для управления объектами DOM - PullRequest
Новая
       1

изменение объектов модели внутри контроллеров для управления объектами DOM

0 голосов
/ 18 декабря 2018

Итак, я учусь использовать контроллеры в angularjs, и я застрял.Я создал форму, используя html, и проверил, отвечает ли контроллер на html через связанный с данными атрибут «message».Однако «введите свои данные» не отображается в разделе «Добавить событие» в браузере.Я что-то упустил в своем коде?Есть ли где-нибудь в папке app.module где я должен объявить конструктор?Дайте мне знать ваши мысли. 

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    </script>

</head>
<body>
<h3>Add Event</h3>

<div ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>
    {{message}}
    <table>

        <tr>
            <td>Event Name</td>
            <td><input type="text" ng-model="event.Name" required /></td>
        </tr>
        <tr>
            <td>Event Location</td>
            <td><input type="text" ng-model="event.Location" required /></td>
        </tr>
        <tr>
            <td>Event Description</td>
            <td><input type="text" ng-model="event.Description" required /></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="submit" ng-disabled="AddEventForm.$invalid"></td>
        </tr>
    </table>
</div>

        <script>
        var eventForm = angular.module('eventForm', []);
        eventForm.controller('eventsCtrl', function($scope) {
        $scope.message = 'Enter your details';
        $scope.addEvent = function()
        {

        }
    });

        </script>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Я думаю, вы должны использовать тег form в этой ситуации: 

<form ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>
0 голосов
/ 18 декабря 2018

Вам может понравиться следующее 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  </head>
  <body>
    <h3>Add Event</h3>

    <form
      ng-app="eventForm"
      ng-controller="eventsCtrl"
      name="AddEventForm"
      ng-submit="AddEvent()"
    >
      {{ message }}
      <table>
        <tr>
          <td>Event Name</td>
          <td><input type="text" ng-model="event.Name" required /></td>
        </tr>
        <tr>
          <td>Event Location</td>
          <td><input type="text" ng-model="event.Location" required /></td>
        </tr>
        <tr>
          <td>Event Description</td>
          <td><input type="text" ng-model="event.Description" required /></td>
        </tr>
        <tr>
          <td colspan="2">
            <button type="submit" ng-disabled="AddEventForm.$invalid">
              Submit
            </button>
          </td>
        </tr>
      </table>
    </form>

    <script>
      var eventForm = angular.module("eventForm", []);
      eventForm.controller("eventsCtrl", function($scope, $log) {
        $scope.message = "Enter your details";
        $scope.AddEvent = function() {
          $log.log($scope.event);
        };
      });
    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...