Using xeditable to mass update JSON content - Andrew Pougher

Using xeditable to mass update JSON content - Andrew Pougher

by Andrew Pougher

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.9/css/xeditable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.1.9/js/xeditable.js"></script>
<h4>Angular-xeditable List for JSON based DB update</h4>
<div ng-app="app" ng-controller="Ctrl"  >
    <div ng-repeat = "qt in bookquotes.entries" class="panel panel-default">
  <span editable-text="qt.quote" e-form="textBtnForm" onaftersave="updateQuote($data)">
    {{ qt.quote || 'empty' }}
   </span>
  <button class="btn btn-xs btn-info" ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
    edit
  </button>
 </div>
    <span ng-model="bookquotes.entries">  {{ bookquotes.entries | json }}</span>


</div>
<script>
	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');
  </script>

CSS

div[ng-app] { margin: 50px; }

JavaScript

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope, $element,$window) {
  $scope.bookquotes = { entries: [{'quote': 'Joe proposed marriage and against her mothers wishes.'},{'quote' : 'He stowed away on a train to Detroit.'},{'quote' : 'As far as I knew, the belt was never actually used on any of us'},{'quote' : 'Every season had a different feeling.'}]};

$scope.updateQuote = function(data) {
var gatherQuotes = $scope.bookquotes.entries.map(function (item, v) {
            return v + item.quote;
});
        
      //  $window.alert(gatherQuotes);
var revised =  angular.toJson($scope.bookquotes.entries);
 $window.alert(revised);
}

});