var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.showDetails;
$scope.changeShowDetails = function() {
$scope.showDetails = true;
};
$scope.changeShowImages = function() {
$scope.showDetails = false;
};
$scope.my_property = {
"__v": 0,
"_id": "53655b63d81f2e3eaf000001",
"city": "test",
"description": "this is a test property",
"is_rented": false,
"landlord_id": "53504b0230d09f1c4a000001",
"latitude": "41.8902901",
"longitude": "-87.6384679",
"name": "test",
"num_baths": 1,
"num_beds": 1,
"price": 1800,
"street": "test",
"zip": "60654",
"imageURLs": ["https://test.s3.amazonaws.com/shimmy-assets/3320$hottub.jpg"]
}
$scope.name = 'World';
});
<!doctype html>
<html>
<head>
<title>Test - Home</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="file-upload/angular-file-upload-shim.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="file-upload/angular-file-upload.min.js"></script>
<script src="app.js"></script>
<script>var myProp = "53655b63d81f2e3eaf000001";</script>
<style>
body {
padding-top: 80px;
word-wrap: break-word;
}
</style>
</head>
<body ng-app="plunker">
<div class="container" ng-controller="MainCtrl">
<div class="row">
<h3 class="form-fonts"><span class="glyphicon glyphicon-pencil"></span> Edit Property - {{ my_property.name }} </h3>
<button class="btn btn-warning btn-sm" ng-click="changeShowDetails()" ng-show="!showDetails">Edit Details</button>
<button class="btn btn-warning btn-sm" ng-click="changeShowImages()" ng-show="showDetails">Edit Images</button>
<div class="input-text-form" style="padding-top:10px;" ng-show="showDetails">
<div class="col-md-6 form-group">
<label class="form-fonts" for="name">Name</label>
<input class="form-control" id="name" type="text" ng-model="my_property.name" />
</div>
<div class="col-md-6 form-group">
<label class="form-fonts" for="price">Price ($)</label>
<input class="form-control" id="price" type="text" ng-model="my_property.price" />
</div>
<div class="col-md-6 form-group">
<label class="form-fonts" for="city">City</label>
<input class="form-control" id="city" type="text" ng-model="my_property.city" placeholder="e.g. Chicago" required/>
</div>
<div class="col-md-6 form-group">
<label class="form-fonts" for="state">State</label>
<input class="form-control" id="state" type="text" ng-model="my_property.state" required placeholder="e.g. IL" ng-minlength="2" ng-maxlength="2" />
</div>
<div class="col-md-6 form-group">
<label class="form-fonts control-label">Apt, Suite, Bldg. (optional)</label>
<input name="suite" class="form-control" type="text" placeholder="e.g. Apt #7" ng-model="my_property.suite" />
</div>
<div class="col-md-6 form-group">
<label class="form-fonts" for="zip">Zip</label>
<input class="form-control" id="zip" type="text" ng-model="my_property.zip" />
</div>
<div class="col-md-6 form-group">
<label class="form-fonts" for="bedrooms">Bedrooms</label>
<input class="form-control" id="bedrooms" type="text" ng-model="my_property.num_beds" />
</div>
<div class="col-md-6 form-group">
<label class="form-fonts" for="bedrooms">Bathrooms</label>
<input class="form-control" id="bedrooms" type="text" ng-model="my_property.num_beds" />
</div>
<div class="col-md-6 form-group">
<label class="form-fonts" for="is_rented">Is Rented?</label>
<input class="form-control" id="is_rented" type="text" ng-model="my_property.is_rented" />
</div>
<div class="col-md-12 form-group">
<label class="form-fonts" for="description">Description</label>
<textarea class="form-control" id="description" name="description" ng-model="my_property.description" srows="3"></textarea>
</div>
</div>
</div>
</div>
</body>
</html>
/* Put your css in here */
/*! 1.3.1 */
!function(){var a=function(){try{var a=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");if(a)return!0}catch(b){if(void 0!=navigator.mimeTypes["application/x-shockwave-flash"])return!0}return!1};if(window.XMLHttpRequest&&(window.FormData?window.XMLHttpRequest=function(a){return function(){var b=new a;return b.setRequestHeader=function(a){return function(c,d){if("__setXHR_"===c){var e=d(b);e instanceof Function&&e(b)}else a.apply(b,arguments)}}(b.setRequestHeader),b}}(window.XMLHttpRequest):(window.XMLHttpRequest=function(b){return function(){var c=new b,d=c.send;return c.__requestHeaders=[],c.open=function(a){return c.upload||(c.upload={}),c.__listeners=[],c.upload.addEventListener=function(a,b){c.__listeners[a]=b},function(b,d,e){a.apply(c,[b,d,e]),c.__url=d}}(c.open),c.getResponseHeader=function(a){return function(b){return c.__fileApiXHR?c.__fileApiXHR.getResponseHeader(b):a.apply(c,[b])}}(c.getResponseHeader),c.getAllResponseHeaders=function(a){return function(){return c.__fileApiXHR?c.__fileApiXHR.getAllResponseHeaders():a.apply(c)}}(c.getAllResponseHeaders),c.abort=function(a){return function(){return c.__fileApiXHR?c.__fileApiXHR.abort():null==a?null:a.apply(c)}}(c.abort),c.setRequestHeader=function(a){return function(b,d){if("__setXHR_"===b){var e=d(c);e instanceof Function&&e(c)}else a.apply(c,arguments)}}(c.setRequestHeader),c.send=function(){if(arguments[0]&&arguments[0].__isShim){var b=arguments[0],e={url:c.__url,complete:function(a,b){!a&&c.__listeners.load&&c.__listeners.load({type:"load",loaded:c.__loaded,total:c.__total,target:c,lengthComputable:!0}),!a&&c.__listeners.loadend&&c.__listeners.loadend({type:"loadend",loaded:c.__loaded,total:c.__total,target:c,lengthComputable:!0}),"abort"===a&&c.__listeners.abort&&c.__listeners.abort({type:"abort",loaded:c.__loaded,total:c.__total,target:c,lengthComputable:!0}),void 0!==b.status&&Object.defineProperty(c,"status",{get:function(){return b.status}}),void 0!==b.statusText&&Object.defineProperty(c,"statusText",{get:function(){return b.statusText}}),Object.defineProperty(c,"readyState",{get:function(){return 4}}),void 0!==b.response&&Object.defineProperty(c,"response",{get:function(){return b.response}}),Object.defineProperty(c,"responseText",{get:function(){return b.responseText}}),c.__fileApiXHR=b,c.onreadystatechange()},progress:function(a){a.target=c,c.__listeners.progress&&c.__listeners.progress(a),c.__total=a.total,c.__loaded=a.loaded},headers:c.__requestHeaders};e.data={},e.files={};for(var f=0;f<b.data.length;f++){var g=b.data[f];null!=g.val&&null!=g.val.name&&null!=g.val.size&&null!=g.val.type?e.files[g.key]=g.val:e.data[g.key]=g.val}setTimeout(function(){if(!a())throw'Adode Flash Player need to be installed. To check ahead use "FileAPI.hasFlash"';c.__fileApiXHR=FileAPI.upload(e)},1)}else d.apply(c,arguments)},c}}(window.XMLHttpRequest),window.XMLHttpRequest.__hasFlash=a()),window.XMLHttpRequest.__isShim=!0),!window.FormData){var b=function(b){if(!a())throw'Adode Flash Player need to be installed. To check ahead use "FileAPI.hasFlash"';if(!b.__isWrapped&&(null!=b.getAttribute("ng-file-select")||null!=b.getAttribute("data-ng-file-select"))){var c=document.createElement("div");c.innerHTML='<div class="js-fileapi-wrapper" style="position:relative; overflow:hidden"></div>',c=c.firstChild;var d=b.parentNode;d.insertBefore(c,b),d.removeChild(b),c.appendChild(b),b.__isWrapped=!0}},c=function(a){return function(b){var c=FileAPI.getFiles(b);b.target||(b.target={}),b.target.files=c,b.target.files.item=function(a){return b.target.files[a]||null},a(b)}},d=function(a,b){return("change"===b.toLowerCase()||"onchange"===b.toLowerCase())&&"file"==a.getAttribute("type")};HTMLInputElement.prototype.addEventListener&&(HTMLInputElement.prototype.addEventListener=function(a){return function(e,f,g,h){d(this,e)?(b(this),a.apply(this,[e,c(f),g,h])):a.apply(this,[e,f,g,h])}}(HTMLInputElement.prototype.addEventListener)),HTMLInputElement.prototype.attachEvent&&(HTMLInputElement.prototype.attachEvent=function(a){return function(e,f){d(this,e)?(b(this),a.apply(this,[e,c(f)])):a.apply(this,[e,f])}}(HTMLInputElement.prototype.attachEvent)),window.FormData=FormData=function(){return{append:function(a,b,c){this.data.push({key:a,val:b,name:c})},data:[],__isShim:!0}},function(){if(window.FileAPI||(window.FileAPI={}),!FileAPI.upload){var b,c,d,e,f,g=document.createElement("script"),h=document.getElementsByTagName("script");if(window.FileAPI.jsUrl)b=window.FileAPI.jsUrl;else if(window.FileAPI.jsPath)c=window.FileAPI.jsPath;else for(d=0;d<h.length;d++)if(f=h[d].src,e=f.indexOf("angular-file-upload-shim.js"),-1==e&&(e=f.indexOf("angular-file-upload-shim.min.js")),e>-1){c=f.substring(0,e);break}null==FileAPI.staticPath&&(FileAPI.staticPath=c),g.setAttribute("src",b||c+"FileAPI.min.js"),document.getElementsByTagName("head")[0].appendChild(g),FileAPI.hasFlash=a()}}()}window.FileReader||(window.FileReader=function(){function a(a,c){var d={type:a,target:b,loaded:c.loaded,total:c.total,error:c.error};return null!=c.result&&(d.target.result=c.result),d}var b=this,c=!1;this.listeners={},this.addEventListener=function(a,c){b.listeners[a]=b.listeners[a]||[],b.listeners[a].push(c)},this.removeEventListener=function(a,c){b.listeners[a]&&b.listeners[a].splice(b.listeners[a].indexOf(c),1)},this.dispatchEvent=function(a){var c=b.listeners[a.type];if(c)for(var d=0;d<c.length;d++)c[d].call(b,a)},this.onabort=this.onerror=this.onload=this.onloadstart=this.onloadend=this.onprogress=null;var d=function(d){if(c||(c=!0,b.onloadstart&&this.onloadstart(a("loadstart",d))),"load"===d.type){b.onloadend&&b.onloadend(a("loadend",d));var e=a("load",d);b.onload&&b.onload(e),b.dispatchEvent(e)}else if("progress"===d.type){var e=a("progress",d);b.onprogress&&b.onprogress(e),b.dispatchEvent(e)}else{var e=a("error",d);b.onerror&&b.onerror(e),b.dispatchEvent(e)}};this.readAsArrayBuffer=function(a){FileAPI.readAsBinaryString(a,d)},this.readAsBinaryString=function(a){FileAPI.readAsBinaryString(a,d)},this.readAsDataURL=function(a){FileAPI.readAsDataURL(a,d)},this.readAsText=function(a){FileAPI.readAsText(a,d)}})}();
/*! 1.3.1 */
!function(){var a=angular.module("angularFileUpload",[]);a.service("$upload",["$http","$timeout",function(a,b){function c(c){c.method=c.method||"POST",c.headers=c.headers||{},c.transformRequest=c.transformRequest||function(b,c){return window.ArrayBuffer&&b instanceof window.ArrayBuffer?b:a.defaults.transformRequest[0](b,c)},window.XMLHttpRequest.__isShim&&(c.headers.__setXHR_=function(){return function(a){c.__XHR=a,c.xhrFn&&c.xhrFn(a),a.upload.addEventListener("progress",function(a){c.progress&&b(function(){c.progress&&c.progress(a)})},!1),a.upload.addEventListener("load",function(a){a.lengthComputable&&b(function(){c.progress&&c.progress(a)})},!1)}});var d=a(c);return d.progress=function(a){return c.progress=a,d},d.abort=function(){return c.__XHR&&b(function(){c.__XHR.abort()}),d},d.xhr=function(a){return c.xhrFn=a,d},d.then=function(a,b){return function(d,e,f){c.progress=f||c.progress;var g=b.apply(a,[d,e,f]);return g.abort=a.abort,g.progress=a.progress,g.xhr=a.xhr,g}}(d,d.then),d}this.upload=function(b){b.headers=b.headers||{},b.headers["Content-Type"]=void 0,b.transformRequest=b.transformRequest||a.defaults.transformRequest;var d=new FormData,e=b.transformRequest,f=b.data;return b.transformRequest=function(a,c){if(f)if(b.formDataAppender)for(var d in f){var g=f[d];b.formDataAppender(a,d,g)}else for(var d in f){var g=f[d];if("function"==typeof e)g=e(g,c);else for(var h=0;h<e.length;h++){var i=e[h];"function"==typeof i&&(g=i(g,c))}a.append(d,g)}if(null!=b.file){var j=b.fileFormDataName||"file";if("[object Array]"===Object.prototype.toString.call(b.file))for(var k="[object String]"===Object.prototype.toString.call(j),h=0;h<b.file.length;h++)a.append(k?j+h:j[h],b.file[h],b.file[h].name);else a.append(j,b.file,b.file.name)}return a},b.data=d,c(b)},this.http=function(a){return c(a)}}]),a.directive("ngFileSelect",["$parse","$timeout",function(a,b){return function(c,d,e){var f=a(e.ngFileSelect);d.bind("change",function(a){var d,e,g=[];if(d=a.target.files,null!=d)for(e=0;e<d.length;e++)g.push(d.item(e));b(function(){f(c,{$files:g,$event:a})})}),d.bind("click",function(){this.value=null})}}]),a.directive("ngFileDropAvailable",["$parse","$timeout",function(a,b){return function(c,d,e){if("draggable"in document.createElement("span")){var f=a(e.ngFileDropAvailable);b(function(){f(c)})}}}]),a.directive("ngFileDrop",["$parse","$timeout",function(a,b){return function(c,d,e){function f(a,b){if(b.isDirectory){var c=b.createReader();i++,c.readEntries(function(b){for(var c=0;c<b.length;c++)f(a,b[c]);i--})}else i++,b.file(function(b){i--,a.push(b)})}if("draggable"in document.createElement("span")){var g=null,h=a(e.ngFileDrop);d[0].addEventListener("dragover",function(a){b.cancel(g),a.stopPropagation(),a.preventDefault(),d.addClass(e.ngFileDragOverClass||"dragover")},!1),d[0].addEventListener("dragleave",function(){g=b(function(){d.removeClass(e.ngFileDragOverClass||"dragover")})},!1);var i=0;d[0].addEventListener("drop",function(a){a.stopPropagation(),a.preventDefault(),d.removeClass(e.ngFileDragOverClass||"dragover");var g=[],j=a.dataTransfer.items;if(j&&j.length>0&&j[0].webkitGetAsEntry)for(var k=0;k<j.length;k++)f(g,j[k].webkitGetAsEntry());else{var l=a.dataTransfer.files;if(null!=l)for(var k=0;k<l.length;k++)g.push(l.item(k))}!function m(d){b(function(){i?m(10):h(c,{$files:g,$event:a})},d||0)}()},!1)}}}])}();