如何將AngularJs的值設置爲javascript變量

我正在做一個事件調度器應用程序，使用後端作爲瘦架構和前端作爲AngularJs。這裏如何從slim api賦值給javascript variable.Below是我的代碼。我正在使用日曆安排活動。如何將AngularJs的值設置爲javascript變量

<body ng-app="calenderApp" ng-controller="calenderCtrl"> 
        <div class="col-md-9"> 
         <div class="box box-primary"> 
         <div class="box-body no-padding"> 
          <div id="calendar"></div> 
         </div> 
         </div> 
      <script src="plugins/fullcalendar/fullcalendar.min.js"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
      <script src="angularjs/calender.js"></script> 
    </body>

我的javascript引腳日曆上的事件是：

 var date = new Date(); 
     var d = date.getDate(), 
      m = date.getMonth(), 
      y = date.getFullYear(); 
     $('#calendar').fullCalendar({ 
      header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
      }, 
      buttonText: { 
      today: 'today', 
      month: 'month', 
      week: 'week', 
      day: 'day' 
      }, 
      //Random default events 
      events: [ 
      { 
       title: 'All Day Event', 
       start: new Date(y, m, 1), 
       backgroundColor: "#f56954", //red 
       borderColor: "#f56954" //red 
      }, 
      { 
       title: 'Long Event', 
       start: new Date(y, m, d - 5), 
       end: new Date(y, m, d - 2), 
       backgroundColor: "#f39c12", //yellow 
       borderColor: "#f39c12" //yellow 
      }, 
      { 
       title: 'Meeting', 
       start: new Date(y, m, d, 10, 30), 
       allDay: false, 
       backgroundColor: "#0073b7", //Blue 
       borderColor: "#0073b7" //Blue 
      }, 
      { 
       title: 'Lunch', 
       start: new Date(y, m, d, 12, 0), 
       end: new Date(y, m, d, 14, 0), 
       allDay: false, 
       backgroundColor: "#00c0ef", //Info (aqua) 
       borderColor: "#00c0ef" //Info (aqua) 
      }, 
      { 
       title: 'Birthday Party', 
       start: new Date(y, m, d + 1, 19, 0), 
       end: new Date(y, m, d + 1, 22, 30), 
       allDay: false, 
       backgroundColor: "#00a65a", //Success (green) 
       borderColor: "#00a65a" //Success (green) 
      }, 
      { 
       title: 'Click for Google', 
       start: new Date(y, m, 28), 
       end: new Date(y, m, 29), 
       url: 'http://google.com/', 
       backgroundColor: "#3c8dbc", //Primary (light-blue) 
       borderColor: "#3c8dbc" //Primary (light-blue) 
      } 
      ], 
      editable: false, 
      droppable: false, // this allows things to be dropped onto the calendar !!! 
      drop: function (date, allDay) { // this function is called when something is dropped 

      // retrieve the dropped element's stored Event Object 
      var originalEventObject = $(this).data('eventObject'); 

      // we need to copy it, so that multiple events don't have a reference to the same object 
      var copiedEventObject = $.extend({}, originalEventObject); 

      // assign it the date that was reported 
      copiedEventObject.start = date; 
      copiedEventObject.allDay = allDay; 
      copiedEventObject.backgroundColor = $(this).css("background-color"); 
      copiedEventObject.borderColor = $(this).css("border-color"); 

      // render the event on the calendar 
      // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) 
      $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 

      // is the "remove after drop" checkbox checked? 
      if ($('#drop-remove').is(':checked')) { 
       // if so, remove the element from the "Draggable Events" list 
       $(this).remove(); 
      } 

      } 
     }); 
</script>

我AngularJs文件，以獲取事件：

var app = angular.module('calenderApp', []); 
app.controller('calenderCtrl', ['$scope', '$http' ,function($scope, $http) 
{ 
getInfo(); 
function getInfo() 
{ 
    $http.post("http://localhost/AdminLTE-master/sis_crm/route/campaign/campaign/view").then(function(response) { 
     $scope.names = response.data.records; 
    }); 
} 
}]);

在這裏，我怎麼能值設置爲變量，例如標題，開始，backgroundColor，從api接收的邊界顏色。提前預先感謝。

來源

2016-07-26 dhamo dharan

，首先將數據保存到變量：

events = [ //global variable without var 
     { 
      title: 'All Day Event', 
      start: new Date(y, m, 1), 
      backgroundColor: "#f56954", //red 
      borderColor: "#f56954" //red 
     }, 
     { 
      title: 'Long Event', 
      start: new Date(y, m, d - 5), 
      end: new Date(y, m, d - 2), 
      backgroundColor: "#f39c12", //yellow 
      borderColor: "#f39c12" //yellow 
     }, 
     { 
      title: 'Meeting', 
      start: new Date(y, m, d, 10, 30), 
      allDay: false, 
      backgroundColor: "#0073b7", //Blue 
      borderColor: "#0073b7" //Blue 
     }, 
     { 
      title: 'Lunch', 
      start: new Date(y, m, d, 12, 0), 
      end: new Date(y, m, d, 14, 0), 
      allDay: false, 
      backgroundColor: "#00c0ef", //Info (aqua) 
      borderColor: "#00c0ef" //Info (aqua) 
     }, 
     { 
      title: 'Birthday Party', 
      start: new Date(y, m, d + 1, 19, 0), 
      end: new Date(y, m, d + 1, 22, 30), 
      allDay: false, 
      backgroundColor: "#00a65a", //Success (green) 
      borderColor: "#00a65a" //Success (green) 
     }, 
     { 
      title: 'Click for Google', 
      start: new Date(y, m, 28), 
      end: new Date(y, m, 29), 
      url: 'http://google.com/', 
      backgroundColor: "#3c8dbc", //Primary (light-blue) 
      borderColor: "#3c8dbc" //Primary (light-blue) 
     } 
     ];

下次使用它

 var date = new Date(); 
    var d = date.getDate(), 
     m = date.getMonth(), 
     y = date.getFullYear(); 
    $('#calendar').fullCalendar({ 
     header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
     }, 
     buttonText: { 
     today: 'today', 
     month: 'month', 
     week: 'week', 
     day: 'day' 
     }, 
     //Random default events 
     events: events, //here used it 
     editable: false, 
     droppable: false, // this allows things to be dropped onto the calendar !!! 
     drop: function (date, allDay) { // this function is called when something is dropped 

     // retrieve the dropped element's stored Event Object 
     var originalEventObject = $(this).data('eventObject'); 

     // we need to copy it, so that multiple events don't have a reference to the same object 
     var copiedEventObject = $.extend({}, originalEventObject); 

     // assign it the date that was reported 
     copiedEventObject.start = date; 
     copiedEventObject.allDay = allDay; 
     copiedEventObject.backgroundColor = $(this).css("background-color"); 
     copiedEventObject.borderColor = $(this).css("border-color"); 

     // render the event on the calendar 
     // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) 
     $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 

     // is the "remove after drop" checkbox checked? 
     if ($('#drop-remove').is(':checked')) { 
      // if so, remove the element from the "Draggable Events" list 
      $(this).remove(); 
     } 

     } 
    });

在角：

function getInfo() 
{ 
    $http.post("http://localhost/AdminLTE- master/sis_crm/route/campaign/campaign/view").then(function(response) { 
    $scope.names = response.data.records; 
    events[0].title="new title"; //here You are changing standard js variable outside angular scope 
    //refresh fullcalendar 
    $("#calendar").fullCalendar("refetchEvents"); 
}); 
}

來源

2016-07-26 14:20:30

感謝您的幫助.. !!我怎麼能使用事件和#calendar？我在日曆配置中的示例中使用了事件 –

，所以更改它們應該在日曆中更改，但必須使用$（「＃calendar」）。fullCalendar（「refetchEvents」）;如果不是您需要的，請描述。 –

你提及事件[]; ...（'＃日曆'）。fullCalendar（{... events：events .... }）;我可以使用它.. –

如何將AngularJs的值設置爲javascript變量

回答

相關問題