I have created a Visualforce page and i am using Angular js in it.In Angluar js by using Javascript remoting call Apex method.Now i want to pass apex method response in model popup when click on Checkbox. I have following peace of code:
CheckAvaibility.vpf
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" standardController="Lead" extensions="CheckAvailibilityLeadController" readOnly="true">
<html lang="en-US" ng-app="myApp" >
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/alertifyjs/1.9.0/alertify.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.9.0/css/alertify.min.css"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!--cdn for model popup-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<body ng-controller="cont">
<input type="checkbox" name="checkbox" ng-model="myCheckBox" ng-click="checkSelect(y,finalthefinalarray[$parent.$parent.$index].dates[$parent.$index].date,finalthefinalarray[$parent.$parent.$index].Name)" ng-disabled="((d.morningB == true && $index==0 && d.BanquetName == x.Name) || (d.lunchB == true && $index==1 && d.BanquetName == x.Name) || (d.eveningB == true && $index==2 && d.BanquetName == x.Name) || (d.dinnerB == true && $index==3 && d.BanquetName == x.Name))||((d.morningU == true && $index==0 && d.BanquetName == x.Name) || (d.lunchU == true && $index==1 && d.BanquetName == x.Name) || (d.eveningU == true && $index==2 && d.BanquetName == x.Name) || (d.dinnerU == true && $index==3 && d.BanquetName == x.Name))"/>
</body>
<script >
var app1 = angular.module("myApp", ['ui.bootstrap']);
app1.controller('cont', ['$scope','SidFactory','$window','$filter','$timeout', function($scope,SidFactory,$window,$filter,$timeout,$dialog){
$scope.checkSelect=function(slot,slotdate,location)
{
var timeslot = slot;
var date = new Date(slotdate),
mnth = ("0" + (date.getMonth() + 1)).slice(-2),
day = ("0" + date.getDate()).slice(-2);
var slotDate= [date.getFullYear(), mnth, day].join("-");
var place = location;
Visualforce.remoting.Manager.invokeAction('CheckAvailibilityLeadController.getSlotInfo', timeslot,slotDate,place,
function(result, event){
//How to pass result in model popup
//$dialog.dialog({}).open('test.vfp');
//alert(event);
},
{escape: true}
);
}
}]);
</script>
</html>
</apex:page>
And following Apex class:
global class CheckAvailibilityLeadController {
@RemoteAction
global static String getSlotInfo(String timeslot,string slotDate, string place){
Date startDate = Date.valueof(slotDate);
return JSON.serialize([SELECT id,slot__C,Date__c,Location__r.Name,Opportunity__r.Name,slot_status__c,Priority__c FROM Banquet_Slot_Rent_Info__c WHERE slot__c=:timeslot AND Date__c=:startDate AND Location__r.Name=:place]);
}
}
Where i have to write Popup page code i meant in "CheckAvaibility.vpf" or Create Seperate vf page. Please guide me i am new to this scenario.Thanks in Advance.
