Skip to content

Instantly share code, notes, and snippets.

@ph4un00b

ph4un00b/modal.html

Created October 3, 2014 00:24
Show Gist options
  • Save ph4un00b/9748b246f5678cdabb05 to your computer and use it in GitHub Desktop.
Save ph4un00b/9748b246f5678cdabb05 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
modal.html
<html ng-app="app">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
</head>
<body>
<div class="question-modal" tabindex="-10" role="dialog" aria-labelledby="Question Data" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div ng-controller="FormController as form" class="modal-content">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>
<br>
<ul class="nav nav-tabs">
<li class="active"><a href="#modal-question-content" data-toggle="tab">Question Content</a></li>
<li class=""><a href="#modal-question-feedback" data-toggle="tab">Feedback</a></li>
</ul>
<form ng-submit="form.submit()">
<!-- modal body -->
<div class="modal-body">
<div id="model-tab-content" class="tab-content">
<!-- modal tab question content-->
<div class="tab-pane fade active in" id="modal-question-content">
<div class="row">
<div class="col-md-6">
<!-- question textarea -->
<div class="form-group">
<label for="name">Question: {{ form.data.question.text }}</label>
<textarea ng-model="form.data.question.text" name="question" class="form-control" rows="2" cols="25" required="required" placeholder="Enter Question"></textarea>
</div>
<!-- background text -->
<div class="form-group">
<label for="name">Background: {{ form.data.question.background }}</label>
<textarea ng-model="form.data.question.background" name="background" class="form-control" rows="2" cols="25" required="required" placeholder="Enter Background"></textarea>
</div>
<!-- video link-->
<div class="form-group">
<label for="name">Video Link: {{ form.data.question.video_link }}</label>
<input ng-model="form.data.question.video_link" type="text" class="form-control" id="name" placeholder="Enter Link" required="required"/>
</div>
<!-- references -->
<div class="form-group form-group-options">
<label for="references">References: {{ form.data.references.text }}</label>
<div class="input-group input-group-option">
<input ng-model="form.data.references.text" type="text" name="references[]" class="form-control" placeholder="Add Reference">
<span class="input-group-addon input-group-addon-remove">
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
<!-- upload image -->
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 110px; height: 60px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
</div>
<!-- right side -->
<div class="col-md-6">
<!-- select banks -->
<div class="form-group bank-multiple-selects">
<label for="banks">Select Bank(s): {{ form.data.banks.selected }}</label>
<!-- <label ng-bind="form.selectedBankId" for="banks">Select Bank(s): </label> -->
<div class="input-group bank-multiple-select">
<select ng-model="form.data.banks.selected" ng-options="b.id as b.option for b in form.BankOptions" class="form-control"></select>
<!-- <select ng-model="form.selectedBank" ng-options="b.id as b.option for b in form.BankOptions" class="form-control"> -->
<!-- <select ng-model="form.selectedBank" ng-options="b.option for b in form.BankOptions" class="form-control"></select> -->
</div>
</div>
<!-- select subjects -->
<div class="form-group bank-multiple-selects">
<label for="banks">Select Subject(s): {{ form.data.subjects.selected }}</label>
<div class="input-group bank-multiple-select">
<select ng-model="form.data.subjects.selected" ng-options="b.id as b.option for b in form.SubjectOptions" class="form-control"></select>
</div>
</div>
<!-- add answers -->
<div class="form-group form-group-options">
<label for="answers">Answers {{ form.data.answer.text }}</label>
<div class="input-group input-group-option">
<span class="input-group-addon">
<input ng-model="form.data.answers.correct" type="checkbox">
</span>
<input ng-model="form.data.answers.text" type="text" name="answers[]" class="form-control" placeholder="Add Answer">
<span class="input-group-addon input-group-addon-remove">
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
<!-- Explanation textarea -->
<div class="form-group">
<label for="name">Explanation {{ form.data.explanation.text }}</label>
<textarea ng-model="form.data.explanation.text" name="message" id="message" class="form-control" rows="4" cols="25" required="required" placeholder="Enter Explanation"></textarea>
</div>
</div>
<textarea class="form-control" rows="10" cols="80">{{ form.data }}</textarea>
</div>
</div>
</div>
</div>
<!-- modal footer -->
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Close"/>
<input type="button" class="btn btn-primary" value="Save Changes"/>
<input type="submit" class="btn btn-success" value="Send Question" ng-disabled="form.$invalid">
<!-- <input type="button" class="btn btn-success" value="Send Question"/> -->
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
angular.module('app', [])
.controller('FormController', [function() {
var self = this;
// self.JsonData = "jamon";
self.BankOptions = [
{id: 1, option: "bank 1"},
{id: 2, option: "bank 2"},
{id: 3, option: "bank 3"},
{id: 4, option: "bank 4"},
{id: 5, option: "bank 5"},
{id: 6, option: "bank 6"}
];
// self.selectedBankId = 1;
// self.selectedBank = self.BankOptions[1];
self.SubjectOptions = [
{id:1, option: "subject 1", bank: 1},
{id:2, option: "subject 2", bank: 1},
{id:3, option: "subject 3", bank: 1},
{id:4, option: "subject 4", bank: 1},
{id:5, option: "subject 452", bank: 2},
{id:6, option: "subject 13643265", bank: 2},
{id:7, option: "subject 7643", bank: 2},
{id:8, option: "subject 7543", bank: 2},
{id:9, option: "subject 754", bank: 3},
{id:10, option: "subject 7485", bank: 3},
{id:11, option: "subject 126423", bank: 3},
{id:12, option: "subject 623653", bank: 3},
{id:13, option: "subject 152", bank: 4},
{id:14, option: "subject gds", bank: 4},
{id:15, option: "subject gdf", bank: 4},
{id:16, option: "subject gdf", bank: 4}
];
// self.selectedSubjectId = 1;
// self.selectedSubjectBank = self.SubjectOptions[1];
self.Items = [
{id: 1, question: 'First Question?', isDraft: true},
{id: 2, question: 'Second Question?', isDraft: true},
{id: 3, question: 'Third Question?', isDraft: true},
{id: 1, question: 'First Question?', isDraft: true},
{id: 2, question: 'Second Question?', isInReview: true},
{id: 3, question: 'Third Question?', isInReview: true},
{id: 1, question: 'First Question?', isInReview: true},
{id: 2, question: 'Second Question?', isInReview: true},
{id: 3, question: 'Third Question?', isInReview: true},
{id: 1, question: 'First Question?', isInReview: true},
{id: 2, question: 'Second Question?', isApproved: true},
{id: 3, question: 'Third Question?', isApproved: true}
];
self.submit = function(){
console.log(angular.toJson(self.data));
// self.JsonData = self.data;
};
// self.getBankOptions;
// self.getSubjectOptions;
// self.getDraftQuestions;
// self.deleteDraftQuestion;
// self.updateDraftQuestion;
// self.getInReviewQuestions;
// self.getApprovedQuestions;
// self.createQuestion;
// self.sendQuestion;
// self.sendMessage;
}]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment