今天我遇到了一个自发生成的随机问题。我一定做了一些事情来生成它,浏览器更新或其他东西。无论如何,我的 html 中有一个复选框列表,全部以方格的名义。(post.id 使用的是角度,以防有人想知道。
<input type="checkbox" id="post.id" name="checkered">
无论如何,我在顶部导入了一个脚本,其中包含一个名为"summary"的函数。
<script src="../scripts/post/controller_post.js"></script>
我在按下按钮时调用此函数(意味着应该加载 DOM)。
// Makes a summary
function summarize(postID){
var checkboxes = document.getElementsByName('checkered');
console.log(checkboxes);
console.log(checkboxes.length);
for(var i=0; i < checkboxes.length; i++)
{
if(checkboxes[i].checked)
{//do stuff
}
}
};
编辑
上下文:我使用带有引导模式的 angular 来创建帖子,而页面上的复选框确定帖子是一个或多个其他帖子的摘要。
<div class="modal fade" id="savePostModal" tabindex="-1" role="dialog" aria-labelledby="myPostLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form name="form" role="form" novalidate class="ng-scope ng-invalid ng-invalid-required ng-dirty ng-valid-minlength" ng-submit="createMob()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="clear()">×</button>
<h4 class="modal-title" id="myPostLabel">Create or edit a Post</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" name="id" ng-model="post.id" readonly>
</div>
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" name="test" placeholder="Title your post..." ng-model="post.name" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Author</label>
<input type="text" class="form-control" name="test" placeholder="Temporary Field..." ng-model="post.author" ng-minlength=1 required>
</div>
<div class="form-group">
<label>Text</label>
<textarea rows="8" placeholder="Status update here..." class="form-control" type="text" name="test" ng-model="post.text" ng-minlength=1 required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="clear()">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="submit" ng-disabled="form.$invalid" ng-click="closeModal()" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> Save
</button>
</div>
</form>
</div>
</div>
</div>
一旦它调用了创建函数,创建就会发布一个帖子。
$scope.create = function () {
// populate summary field
$scope.post.summary = isSummary();
Post.save($scope.post, function () {
$('#savePostModal').modal('hide');
$scope.posts = Post.query();
$scope.clear();
$scope.posts.$promise.then(function(data)
{
summarize(data[data.length - 1].id);
postData = data;
});
});
};
创建函数使用帖子的 ID 号调用汇总函数。 在这个函数中,我们看到我从运行脚本的页面中获取名为"方格"的元素,这就是问题开始的地方。
nodelist 记录得很好,但是当我尝试获取长度时,它返回 0,几乎就像页面上的元素尚未加载一样,例如在这篇文章中,但据我所知,它们应该是。思潮?
事实证明,与迈克关于我发布的代码不相关的声明相反,事实证明答案就在我添加到修订后的帖子中的代码中。这里的问题是我使用带有 ng-repeat 语句的 AngularJS 来创建复选框,无论出于何种原因,当我调用函数内部的汇总函数时
$scope.posts.$promise.then(function(data){ //stuff}
代码无法再访问该文档。我对 AngularJS 的理解还不够好,无法理解为什么这是真的,但我知道这是问题的根源,因为我将 promise 语句中的数据分配给一个临时值并在该语句之外执行了 summarize 函数,它完美地工作。 但是,无论如何,我都必须非常感谢@Mike"Pomax"Kamermans,因为如果没有他的提醒将我的错误分解成更小的部分,我几乎不会这么快发现问题。希望遇到此问题的其他AngularJS用户可以从我的问题中受益。