"editable"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/dimamarkus/pen/MwbdNp?depth=everything&order=popularity&page=13&q=editable&show_forks=false" /> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css'><link rel='stylesheet prefetch' href='https://vitalets.github.io/angular-xeditable/dist/css/xeditable.css'> <style class="cp-pen-styles">.editable-select .editable-data, .editable-select .controls { display: inline-block; } .editable-select .editable-data { width: 10rem; } button, button:hover { background: none; color: #008CBA; padding: 0; } .centered { width: 200px; height: 50px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } </style></head><body> <body ng-app="myApp"> <form ng-controller="instructorCtrl" class="editable-select centered" ng-submit="selectInstructor()"> <div class="editable-data"> <select ng-show="!editMode" disabled> <option>{{ selectedInstructor.name }}</option> </select> <select class="bottom" ng-show="editMode" ng-model="newInstructor"ng-options="instructor as instructor.name for instructor in instructors"> <option></option> </select> </div> <div class="controls"> <a ng-show="!editMode" ng-click="enterEditMode()"><i class="fa fa-pencil"></i></a> <button ng-show="editMode"><i class="fa fa-check"></i></button> <a ng-show="editMode" ng-click="editMode = !editMode"><i class="fa fa-times"></i></a> </div> </form> </body> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script><script src='https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js'></script> <script >var app = angular.module('myApp', []); app.controller('instructorCtrl', function($scope){ $scope.instructors = [ { id: 12, name: "John Doe" }, { id: 15, name: "Robert Durst" }, { id: 23, name: "James Dean" } ]; $scope.selectedInstructor = $scope.instructors[0]; $scope.selectInstructor = function() { $scope.selectedInstructor = $scope.newInstructor; // If you have a back-end persistance layer, you can update it here // updateBackEnd($scope.newInstructor); $scope.editMode = false; } $scope.enterEditMode = function() { $scope.newInstructor = $scope.selectedInstructor; $scope.editMode = true; } }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Vue Paper Dashboard
Bootstrap Editable jQuery Grid

Questions / Comments: