gpt4 book ai didi

javascript - 在angularjs中,如何根据范围内的数据确定div的位置

转载 作者:行者123 更新时间:2023-11-29 21:21:02 27 4
gpt4 key购买 nike

我正在尝试在 angular.js 中制作日历。

假设我在范围内有以下数据:

$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"}]

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

我是 Angular 的新手,我的下意识 react 是让每个日期 div 在每个包含日期的日期 div 中都有一个属性,并循环遍历事件列表并将每个事件的事件 div 附加到相应的日期div 使用 jQuery。但这样做的问题是,当范围发生变化时, View 不会。

是否有使用 angular 执行此操作的好方法?我知道你可以有循环遍历数据或根据数据隐藏的指令,但我似乎找不到任何关于使用 angular 来确定 div 位置的信息

最佳答案

你可以这样做:

"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>

关于javascript - 在angularjs中,如何根据范围内的数据确定div的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38538529/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com