gpt4 book ai didi

javascript - 更改 Controller 内的模型对象来操作 DOM 对象

转载 作者:行者123 更新时间:2023-11-28 17:14:26 25 4
gpt4 key购买 nike

所以我正在学习如何在 angularjs 中使用 Controller ,但我陷入了困境。我使用 html 创建了一个表单,并进行了测试以查看 Controller 是否通过数据绑定(bind)属性“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>

最佳答案

您可以点赞以下内容

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

关于javascript - 更改 Controller 内的模型对象来操作 DOM 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53827506/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com