0
我想要做一个帖子，并非常简单地使用引导datetimepicker添加名称和日期时间。当我选择日期时间并点击添加什么都不会发生。但是，如果我输入字段并点击添加它仍然会提交。我已经阅读了很多关于这个项目的自定义指令等，但是我似乎无法让它们中的任何一个工作，所以我想我只是分享我的代码。无法使用angularjs和引导日期时间选择器的表单提交
Index.cshtml
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Create Content Files</h5>
</div>
<!--Start Form -->
<div class="ibox-content">
<div class="form-horizontal" role="form" name="addcontentFileform">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">File Name</label>
<div class="col-sm-10">
<input type="text" data-ng-model="contentFile.FileName" class="form-control" id="title" placeholder="Your File Name" required title="Enter your File Name" />
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Publish Date</label>
<div class="col-sm-10">
<div class="input-group date">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input type="text" class="form-control datetimepicker" id="datetimepicker" data-ng-model="contentFile.PublishDate" />
<span class="glyphicon form-control-feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<span data-ng-hide="editMode">
<input type="submit" value="Add" ng-disabled="addcontentFileform.$invalid" data-ng-click="add()" class="btn btn-primary" />
</span>
<span data-ng-show="editMode">
<input type="submit" value="Update" ng-disabled="addcontentFileform.$invalid" data-ng-click="update()" class="btn btn-primary" />
</span>
</div>
</div>
<!-- Start form Buttons -->
<div class="form-group">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-ng-click="closeAddUpdate()">Cancel</button>
</div>
</div>
<!-- End form Buttons -->
</div>
</div>
<!--End Form -->
</div>
</div>
</div>
</div>
我打电话引导插件和页面上的控制器如预期。
contentFile.controller.js
var app = angular.module('contentFileApp', []);
var baseAddress = 'http://localhost:63271/api/ApiContentFile/';
var url = "";
app.factory('contentFileFactory', function ($http) {
return {
getContentFilesList: function() {
url = baseAddress + "GetContentFilesList";
return $http.get(url);
},
getContentFile: function (contentFile) {
url = baseAddress + "GetContentFile/" + contentFile.Id;
return $http.get(url);
},
addContentFile: function (contentFile) {
url = baseAddress + "Post";
return $http.post(url, contentFile);
},
updateContentFile: function (contentFile) {
url = baseAddress + "Put/" + contentFile.Id;
return $http.put(url, contentFile);
},
deleteContentFile: function (contentFile) {
url = baseAddress + "DeleteContentFile/" + contentFile.Id;
return $http.delete(url);
}
};
});
app.controller('contentFileController', function PostController($scope, contentFileFactory) {
$scope.contentFiles = [];
$scope.contentFile = null;
$scope.editMode = false;
//get ContentFile
$scope.get = function() {
$scope.contentFile = this.contentFile;
$('#viewModal').toggle('show');
$('#fullModal').toggle('hide');
};
//get all ContentFiles
$scope.getAll = function() {
contentFileFactory.getContentFilesList().success(function (data) {
$scope.contentFiles = data
//$('#fullModal').toggle('show');
$('#viewModal').toggle('hide');
$('#contentFileModel').toggle('hide');
$('#confirmModal').toggle('hide');
}).error(function (data) {
$scope.error = "An Error has occured while Loading contentFiles! " + data.ExceptionMessage;
});
};
// add ContentFile
$scope.add = function() {
var currentContentFile = this.contentFile;
//if (currentContentFile != null && currentContentFile.FileName != null && currentContentFile.PublishDate && currentContentFile.PhotoURL && currentContentFile.IsOwned && currentContentFile.FileLink && currentContentFile.Description)
if (currentContentFile != null && currentContentFile.FileName != null && currentContentFile.PublishDate) {
contentFileFactory.addContentFile(currentContentFile).success(function (data) {
$scope.addMode = false;
currentContentFile.Id = data;
$scope.contentFiles.push(currentContentFile);
//reset form
$scope.contentFile = null;
// $scope.addcontentFileform.$setPristine(); //for form reset
$('#contentFileModel').modal('hide');
$('#fullModal').toggle('show');
}).error(function (data) {
$scope.error = "An Error has occured while Adding contentFile! " + data.ExceptionMessage;
});
}
};
//edit contentFile
$scope.edit = function() {
$scope.contentFile = this.contentFile;
$scope.editMode = true;
$('#contentFileModel').toggle('show');
$('#fullModal').toggle('hide');
};
//update contentFile
$scope.update = function() {
var currentContentFile = this.contentFile;
contentFileFactory.updateContentFile(currentContentFile).success(function (data) {
currentContentFile.editMode = false;
$('#contentFileModel').toggle('hide');
$('#fullModal').toggle('show');
}).error(function (data) {
$scope.error = "An Error has occured while Updating contentFile! " + data.ExceptionMessage;
});
};
// delete ContentFile
$scope.delete = function() {
currentContentFile = $scope.contentFile;
contentFileFactory.deleteContentFile(currentContentFile).success(function (data) {
$('#confirmModal').toggle('hide');
$('#fullModal').toggle('show');
//$('#fullModal').toggle('hide');
$scope.contentFiles.pop(currentContentFile);
}).error(function (data) {
$scope.error = "An Error has occured while Deleting contentFile! " + data.ExceptionMessage;
$('#confirmModal').toggle('hide');
});
};
//Model popup events
$scope.showadd = function() {
$scope.contentFile = null;
$scope.editMode = false;
$('#contentFileModel').toggle('show');
$('#fullModal').toggle('hide');
};
$scope.showedit = function() {
$('#contentFileModel').toggle('show');
$('#fullModal').toggle('hide');
};
$scope.showconfirm = function (data) {
$scope.contentFile = data;
$('#confirmModal').toggle('show');
$('#fullModal').toggle('hide');
};
$scope.cancel = function() {
$scope.contentFile = null;
$('#confirmModal').toggle('hide');
$('#fullModal').toggle('show');
}
$scope.closeDetails = function() {
$scope.contentFile = null;
$('#viewModal').toggle('hide');
$('#fullModal').toggle('show');
}
$scope.closeAddUpdate = function() {
$scope.contentFile = null;
$('#contentFileModel').toggle('hide');
$('#fullModal').toggle('show');
}
$scope.closeDelete = function() {
$scope.contentFile = null;
$('#confirmModal').toggle('hide');
$('#fullModal').toggle('show');
}
//initialize your contentFiles data
$scope.getAll();
});
很抱歉的混乱和混乱，我只是真的很好奇如何这一切工作，我可能是做错了
编辑：似乎contentFile.PublishDate没有绑定到模型，当我点击添加按钮
你有什么错误吗？毕竟...这个指令要求你也安装momentJS ..如果你忘了它，你可能有一个错误等待你在开发控制台.... – ymz
我有一个时刻添加，以及我没有得到任何控制台错误，日期刚好在角度控制器中未定义 –
您有2个类型为'submit'的输入形式相同。如果您没有以传统的HTML方式提交表单，我会将其更改为'type =“button”'。否则，目前还不清楚点击这些时发生了什么 –