Angular-xeditable ui-bootstrap popover

angular-xeditable using ui-bootstrap popover for single or multiple fields for entry

by Santosh Giridhara

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<h4>Angular-xeditable Text (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">


  <br/>
    <br/>
    <div class="ui-popover-wrapper">
        <div id="popoverWrapper">
<span>Color 1:
<a href="#" e-form="theForm" 
               e-clickable="true" editable-select="combination.color1" e-ng-options="s.value as s.text for s in color1 track by s.text"
               uib-popover-template="'popover.html'"
               popover-is-open="popoverIsOpen2"
               popover-class="increase-popover-width"
               popover-append-to-body="true"
               popover-placement="right-bottom"
               onshow="popoverIsOpen2 = !popoverIsOpen2; displayPopup('popoverWrapper', true)" onbeforesave="validate($data)" onhide="popoverIsOpen2 = !popoverIsOpen2; hidePopup()">
                {{ showColor1() }}
            </a></span>
            <br/>
            <div ng-show="popoverIsOpen2">
            <span>Color 2:
               <a href="#" e-form="theForm" e-name="color2" e-class="color2"
               e-clickable="true" editable-select="combination.color2" 
               e-ng-options="s.value as s.text for s in color2 track by s.text">
    {{ showStatus() }}

   
   </a></span>
            </div>
        </div>
    </div>
</div>

CSS

div[ng-app] { margin: 50px; }
/* ui-bootstrap editable popover */
.ui-popover-wrapper a {
    /* make the link always show up */  
    display: inline !important;
}

.ui-popover-wrapper form {
    display: none !important;
}

.increase-popover-width {
    max-width: 400px;
}

.editable-radiolist label {
  display: block;
}

JavaScript

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

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

app.controller('Ctrl', function($scope, $filter, $templateCache) {


  $scope.color1 = [
    {value: 'select', text: 'select'},
    {value: 'red', text: 'Red'},
    {value: 'blue', text: 'Blue'},
    {value: 'green', text: 'Green'}
  ]; 
    $scope.color2 = [
    {value: 'select', text: 'select'},
    {value: 'white', text: 'White'},
    {value: 'grey', text: 'Grey'},
    {value: 'black', text: 'Black'}
  ]; 

  $scope.showColor1 = function() {
    var selected = $filter('filter')($scope.color1, {value: $scope.combination.color1});
    return ($scope.combination.color1 && selected.length) ? selected[0].text : 'Not set';
  };
  $scope.showColor2 = function() {
    var selected = $filter('filter')($scope.color2, {value: $scope.combination.color2});
    return ($scope.combination.color2 && selected.length) ? selected[0].text : 'Not set';
  };
	$scope.combination = {
    color1: 'red',
    color2: ' '
  };
  
  $scope.validate = function(data){
  	var color2Value = $('.color2 option:selected').text();
  	
		if(data && color2Value){
			console.log(data, color2Value);
		}else if(!color2Value){
    	console.log('color2 dropdown value not selected');
    	$scope.theForm.$setError('color2', 'Value not selected');
    }else if(!data){
    	console.log('color2 dropdown value not selected');
    	$scope.theForm.$setError('color2', 'Value not selected');
    }
  };
    

    
  $scope.displayPopup = function (elementId, aForm) {
      var fieldElement,
          wrapper = angular.element('<div></div>');

      if (!aForm) {
          fieldElement = angular.element(document.querySelector('#' + elementId)).next()
      } else {
          //Need to clone it otherwise the link disappears on click
          fieldElement = angular.element( document.querySelector('#' + elementId)).clone();
          //Need to remove the first "a" editable tag,...