我正在尝试发表文章,非常简单地使用引导datetimepicker添加名称和日期时间。当我选择日期时间并点击添加时,没有任何反应。但是,如果我在字段中键入并单击添加,它将仍然提交。我已经阅读了很多有关该项目的自定义指令等内容,但是我似乎无法使其中任何一个正常工作,所以我认为我只是分享我的代码。
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未绑定到模型
最佳答案
我找到了!在您的add方法中,您得到以下行:
if (currentContentFile != null &&
currentContentFile.FileName != null &&
currentContentFile.PublishDate)
问题:在填充日期字段之前,currentContentFile.PublishDate始终是未定义的,因此将阻止您第一次设置值...这也是为什么您通过手动插入值来“固定”它的原因
简而言之-将上述陈述替换为:
if (currentContentFile != null &&
currentContentFile.FileName != null)