angularjs 相关问题

如何在 Angular 上使用鼠标滚轮滚动到某个项目

我遇到了一些麻烦。 我的主页有 4 个具有不同 id 的 div 元素。 例子： 我遇到了一些麻烦。 我的主页有 4 个具有不同 id 的 div 元素。 示例： <div id='one' class='sectionscroll'></div> <div id='two' class='sectionscroll'></div> <div id='three' class='sectionscroll'></div> <div id='four' class='sectionscroll'></div> 所有这些 div 元素都会选择屏幕的高度。 当页面加载时，我自动滚动到 id 为 2 的 div <div id='two'></div>。 从这个位置，我想滚动到另一个位置。 但我不明白如何做这个。 这是我的工厂，通过使用 ng-click 缓慢滚动到位置。 (function () { 'use strict'; angular .module('app.scroll.home.page', []) .factory('$scrollHomePage', $scrollHomePage); $scrollHomePage.inject = []; function $scrollHomePage() { return { scrollTo: function(eId) { var startY = currentYPosition(); var stopY = elmYPosition(eId); var distance = stopY > startY ? stopY - startY : startY - stopY; if (distance < 100) { scrollTo(0, stopY); return; } var speed = Math.round(distance / 65); if (speed >= 250) speed = 250; var step = Math.round(distance / 25); var leapY = stopY > startY ? startY + step : startY - step; var timer = 0; if (stopY > startY) { for (var i = startY; i < stopY; i += step) { setTimeout("window.scrollTo(0, " + leapY + ")", timer * speed); leapY += step; if (leapY > stopY) leapY = stopY; timer++; } return; } for (var i = startY; i > stopY; i -= step) { setTimeout("window.scrollTo(0, " + leapY + ")", timer * speed); leapY -= step; if (leapY < stopY) leapY = stopY; timer++; } function currentYPosition() { if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; } if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop; if (document.body.scrollTop) return document.body.scrollTop; return 0; } function elmYPosition(eID) { var elm = document.getElementById(eID); var y = elm.offsetTop; var node = elm; while (node.offsetParent && node.offsetParent != document.body) { node = node.offsetParent; y += node.offsetTop; } return y; } } }; } })(); 在控制器中我使用了自动滚动 $(window).load(function () { $("div.sectionscroll").height($('body').height()); $location.hash(''); $scrollHomePage.scrollTo('two'); }); 我的答案已经完成。可能有人需要这个。所以享受它。 :) var currentPosition = 1; angular.element(document).on("mousewheel DOMMouseScroll", debounce(function(e) { e.preventDefault(); e.stopPropagation(); var isUp = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? true : false; if (isUp) { if (currentPosition > 0) { currentPosition--; setPoinerActive(); $scrollHomePage.scrollTo(vm.myIndex[currentPosition]); } } else { if (currentPosition < 3) { currentPosition++; setPoinerActive(); $scrollHomePage.scrollTo(vm.myIndex[currentPosition]); return; } } },300)); 嘿@Volodymyr 如果我正确地回答了你的问题，你需要滚动到特定的哈希（id of div） 您可以使用 Angular 的 $anchorScroll 和 $location 服务。 下面的代码将滚动到 id 为 output 的 div，如果您想将用户带到比确切 div 低一点的位置，您甚至可以向滚动位置添加偏移量 $anchorScroll.yOffset = 30; // to add extra top margin $location.hash('output'); $anchorScroll(); 然后您可以在按钮或您想要的东西的 ng-click 上调用此函数。

如何使用 Angular Formly 禁用表单输入字段？

如何使用 Angular Formly 禁用表单输入字段？我用谷歌搜索过，没有明确的答案。事实上，我搜索了 Formly 的“现场配置文档”，只有一个实例...

Angular JS 部分不会停留在原处

嗨，我的index.html中有3个部分 ... 嗨，我的index.html中有3个部分 <!--header view--> <div id="header" ng-include="'partials/header.html'"></div> <!--main page view--> <div ui-view class=""></div> <!-- Loading the Footer --> <div id="oilFooter" ng-include="'partials/footer.html'"></div> </html> </body> 标题当前与下面的主视图重叠。 看起来像这样： 我希望它看起来像这样： 这是 header.html 的 css header { position: absolute; top:0px; margin: 0 auto; margin-bottom:10px; width:100%; height:85px; z-index:300; background-color:#000000; font-family: 'Open Sans', sans-serif; color:#c4c4c4; font-size:16.0px; line-height:1.19em; html 的 CSS /* general settings */ html { min-height:100%; overflow-x:hidden; overflow-y:scroll; position:relative; width:100%; padding-left: 20px; padding-right: 20px; padding-bottom:0px; /* background-color:#1c1c1c;*/ background-color:#cecece; } 谢谢。 我将标题定位从绝对位置更改为相对位置。 这并不是一个真正的答案，但这似乎是一个 CSS 问题。添加这个 { background: #000 !important; color: #0f0 !important; outline: solid #f00 1px !important; } 并检查是否有任何元素偏离边界。

离子框架中的月份和年份选择器

我正在为我的离子应用程序寻找月份和年份选择器。目前我正在使用http://ngcordova.com/docs/plugins/datePicker/ 但我不想在这里选择日期选择器。如何只有月和叶...

调试器在 Chrome 和 FireFox AngularJS 中不起作用

我正在使用 AngularJS 和 Angular 8 开发混合应用程序。我正在尝试调试我的应用程序以进行测试，但问题是调试器在本地主机上工作正常，但事实并非如此

加入mysql用户并发布angularjs

如何在 AngularJS 中组合帖子和用户，例如在这样的数据库中。有2个数据是相同的，即user_id，那么我想显示用户名数据？ [帖子：{post_id：1，你...

Google 地图自动完成，修复输入

我正在尝试将谷歌地图自动完成输入添加到我的离子应用程序中。除了当我滚动时，它工作得很好。如图所示： 所以我尝试了不同的方法，例如更改 .pac-

我的 selectAll 功能无法正常工作

我写了两个功能全选和手动选择，全选选择所有值并取消选择值手动选择工作正常但全选功能未检查和取消...

角度事件在日期选择器上不起作用

当我更改开始日期时，我想将结束日期更改为与日期选择器上的开始日期相同，但是当我在开始日期按钮上创建事件并更改开始日期上的日期时，它不起作用（我使用日期选择器...

Angular 环境组合问题

错误：src/app/components/rooms/add-room/services/room.service.ts:40:51 - 错误 TS2339：类型“{}”上不存在属性“apiBaseUrl”。 40 返回 this.http.delete(${environment.apiBaseUrl}/api/

*ngIf 未按预期渲染 svg

我正在尝试使用 *ngIf 有条件地渲染 svg 图标。我已将 CommonModule 和 BrowserModule 导入到组件中，但每次运行代码时，svg 都不会按应有的方式呈现。 HTML

如果文本字段为空则添加验证

我是 Angular 和 Ionic 的新手，我正在尝试在我的警报文本框中添加验证。 默认情况下，我通过 css 禁用提交图标 “.comment-history-box{指针事件：无;}” 。我想要...

在 pdfmake 中使用 dataUrl 时出现无效图像错误

我正在使用 pdfmake 在 Angular 应用程序中生成 PDF 文档，并且只是尝试使用 dataURL 将图像添加到输出（遵循 pdfmake 文档）。 var 文档定义 = { 内容...

模块“rxjs”没有导出成员“firstValueFrom”

App.service 文件如下所示： 从“@nestjs/common”导入{可注入}； 从 '@nestjs/axios' 导入 { HttpService }； 从'rxjs'导入{Observable，firstValueFrom}； // 导入 { 第一个值...

Angular - 将两个不同的路径路由到同一延迟加载子模块中的不同组件

我有两条路 /a 和 /b 在我的父模块中，我将它们路由到同一个子模块： // 应用程序路由.moudle.ts { 路径：'a'， loadChildren: () => import('./m-child/m-child.module').then(m...

同时编辑多个单元格IGX GRID Angular

我需要同时编辑同一列中的多个单元格。同时，使得单元格内部的实际数据变化被显示出来。是否可以在 igx grid Angul 中执行此操作...

Angular [错误] NG9：组件 AppComponent 的模板中发生属性错误

当我尝试在 Angular 中使用 for 循环时，我收到一条错误消息 这是我在 app.component.html 中的代码 当我尝试在 Angular 中使用 for 循环时，我收到一条错误消息 这是我的代码 app.component.html <app-story @for="let i of [0,1,2,3]" [img]="postImgs[i]" [text]="postText[i]"></app-story> 我也尝试这个 <app-story *ngFor="let i of [0,1,2,3]" [img]="postImgs[i]" [text]="postText[i]"></app-story> 这是我的代码 app.component.ts import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import {HeaderComponent} from './header/header.component'; import {StroyComponent} from './stroy/stroy.component'; import { NgModel } from '@angular/forms'; import { CommonModule, NgForOf } from '@angular/common'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, HeaderComponent, StroyComponent, NgForOf,CommonModule], templateUrl: './app.component.html', styleUrl: './app.component.scss'}) export class AppComponent { title = 'CatsBookProject'; postText =[ 'Hello , i am here to meet new friends and make a friends relationship', 'Hello everyone, Iam glad you are here', 'Hey, my name is Susanne. I amm 2 years old', 'I like eating cookies.']; postImgs =[ 'assets/Imge/img1.png', 'assets/Imge/im21.png', 'assets/Imge/img3.jpg', 'assets/Imge/img4.jpg',]; buttonClicked(){ alert("What's up");}} 这是错误消息 我使用 Angular 版本 17.2.3 也许有人知道我的代码出了什么问题 非常感谢 请查看有关新语法的文档。 这就是您的示例的样子... @for (let i of [0,1,2,3]) { <app-story [img]="postImgs[i]" [text]="postText[i]"></app-story> }

Angularjs ng-包括强制重新加载

我已经阅读了有关此主题的几篇文章，但在最初从远程数据服务器加载后，仍然无法通过 ng-include 加载数据以重新加载。 （示例如何重新加载/刷新我...

AngularJS 按钮显示/隐藏评论框

我一直在学习 AngularJS 并决定用它来做我的项目，我需要一个按钮的帮助。 我正在制作一个博客平台，我想对帖子发表评论。 这是我的帖子： 我想要什么...

用span替换标签

我正在使用 AngularJS 和 mmenu 制作菜单，并且我有一些子菜单无法正确用作子菜单。本质上，mmenu 将跨度视为菜单，当您单击它时，它会展开（或 tr...