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」'。否則，目前還不清楚點擊這些時發生了什麼 –