quantumbutterfly quantumbutterfly - 4 months ago 9
Javascript Question

In angularjs, how do I determine the location of a div based on data in the scope

I am attempting to make a calendar in angular.js.

Let's say I have the following data in the scope:

$scope.events = [{"date":"2016-07-23","name":"Bob's Birthday"},
{"date":"2016-07-24","name":"Doc appt"},
{"date":"2016-07-25","name":"Date with Shannon"}]


I also have a calendar in the HTML with a div corresponding to each date in the month. How do I go about having each date show the corresponding events.

I am new to angular, and my kneejerk reaction is to have each date div have an attribute in each date div containing the date, and loop through the list of events and append an event-div for each event to the corresponding date div using jQuery. But the issue with this is that when the scope changes, the view wont.

Is there a good way to do this using angular? I know you can have directives that loop through data or be hidden depending on the data, but I can't seem to find anything about using angular to determine the location of a div

Answer

you could do something like this:-

 
    'use strict';
     var app = angular.module("testApp", [], function() {
    
      
    });
   
    app.controller("appCtrl", function($scope) {
        
        $scope.events = [{"date":"2016-07-23","name":"Bob's Birthday"},
        {"date":"2016-07-24","name":"Doc appt"},
        {"date":"2016-07-25","name":"Date with Shannon"}]
    
          $scope.$watch('events', function( newValue, oldValue ){
             console.log('entireScope has changed',newValue, oldValue);
             $.each(newValue, function( index, value ) {         
              $("[data-date="+value.date+"]").html(value.name);
            });
          }, true);
    });
  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="testApp">
    <div ng-controller="appCtrl" id="appCtrl">
    <div class="fc-day fc-widget-content fc-mon fc-past" data-date="2016-07-23"></div>
     </div>
      </body>