我正在尝试发帖，只是使用bootstrap 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>
我按预期调用了页面上的bootstrap插件和控制器。
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没有绑定到模型
答案 0 :(得分：1)
我找到了！你的添加方法中有这一行：
1st row| keywords: basic, play | message: okay i will help u |
2nd row| keywords: game, t-shirt | message: okay i will help u |
问题：在填写日期字段之前， currentContentFile.PublishDate 将始终未定义，因此会阻止您在第一时间设置值...这也是你＆＃34;固定＆＃34;它通过手动插入值
简而言之 - 用以下内容替换上述声明：
if (currentContentFile != null &&
currentContentFile.FileName != null &&
currentContentFile.PublishDate)