在angularjs中，如何根据范围中的数据确定div的位置

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

我正试图在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.

我在HTML中也有一个日历，其中有一个div，对应每个月的每个日期。如何让每个日期显示相应的事件。

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.

我是一个新手，我的膝跳反应是让每个日期div在每个日期div中都有一个包含日期的属性，并循环遍历事件列表，并使用jQuery将每个事件的事件div添加到相应的日期div中。但问题是，当范围发生变化时，视图不会。

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

有一种利用角的方法吗?我知道，您可以通过数据进行循环，或者根据数据进行隐藏，但是我似乎找不到任何关于使用角度来确定div的位置的方法。

2 个解决方案

#1

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/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.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>

#2

But the issue with this is that when the scope changes, the view wont.

但问题是，当范围发生变化时，视图不会。

$watch is provided by angularjs specifically to deal with this situation.

$watch由angularjs专门提供，用于处理这种情况。

You can use $watch on your $scope.events. Whenever there will be a change in $scope.events, it will run a function defined by you. You can place your logic inside that function that will update your calendar accordingly.

您可以在$scope.events中使用$watch。只要$范围有变化。事件，它将运行一个由您定义的函数。您可以将您的逻辑放在该函数中，从而相应地更新日历。

See this Plunker that I've created for you.

看看我为你做的这个柱塞。

var app = angular.module('plunker', []);

app.controller('MainCtrl', 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.changeEvent = function() {
    var nameDOM = document.getElementById("name");
    var dateDOM = document.getElementById("date");
    
    var event = {
      "date": dateDOM.value,
      "name": nameDOM.value
    };
    
    $scope.events.push(event);
    
    nameDOM.value = dateDOM.value = ""
  }
  
  $scope.$watch('events', function() {
    alert("hey, events variable has changed! It's time to put some logic here that will update the calendar accordingly");
  }, true);

  
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <input id="name" name="name" placeholder="name"/><br>
    <input id="date" name="date" placeholder="date"/><br>
    <button ng-click="changeEvent()">addEvents</button>
    
  </body>

</html>

#1