我目前有一個模態表單設置,並很好地工作,我想如何,但現在我需要抓住信息輸入到文本框和選擇由用戶和我排序失去了什麼地方我需要開始。下面是我的模態表單的代碼。我不一定在尋找直接的答案,但要指出更多信息的正確方向,但不勝感激。從模態形式(角度)拉用戶輸入
<div ng-app='plunker' ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Create a new post</h3>
</div>
<form name="modalForm">
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
<input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" placeholder="Post Title" required/><br>
<textarea name="modalInput" class="form-control" rows="10" maxlength="1000" form="modalForm" ng-model="data.myNumber2" placeholder="Post Body" required></textarea><br>
<label for="sel1">Select category:</label>
<select name="modalInput" class="form-control" ng-model="data.myNumber3" id="sel1" required>
<option value="" selected disabled>Please select</option>
<option value='lifestyle'>lifestyle</option>
<option value='travel'>travel</option>
<option value='video'>video</option>
</select><br>
<input name="modalInput" type="url" class="form-control" size="10" ng-model="data.myNumber4" placeholder="http://www.postUrlHere.com"/>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">Submit</button>
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</form>
</script>
<h1>GWAT Websites and Designs</h1>
<button class="btn" ng-click="open()">Submit new post</button>
</div>
<script>
var myMod = angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $uibModal, $log) {
$scope.items = ['title', 'body', 'category', 'url'];
$scope.open = function() {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
編輯:
var ModalInstanceCtrl = function($scope, $uibModalInstance, data) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
};
myMod.controller('ModalDemoCtrl', ModalDemoCtrl);
myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl);
</script>
您是否希望將輸入,textarea和選擇值輸入模態實例? – codemax
好吧,更改$ scope.items =項目;到$ scope.data = data;並刪除$ scope.selected對象。另外,從$ uibModalInstance中刪除$ scope.selected.item。它們不再存在,這就是爲什麼你無法打開模式。 – codemax