Question

所以我正在学习如何在angularjs中使用控制器，而我陷入了困境。我使用html创建了一个表单，并进行了测试，以查看控制器是否通过数据绑定属性“ message”响应html。但是，“输入您的详细信息”不会出现在浏览器的“添加事件”下。我在代码中缺少什么吗？我应该在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>

Answer 1

您可以在下面喜欢

<!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>

Answer 2

在这种情况下，我认为您应该使用form标签：

<form ng-app='eventForm' name='AddEventForm' ng-submit='AddEvent();' ng-controller='eventsCtrl'>

更改控制器内部的模型对象以操作DOM对象

2 个答案: