angularjs 相关问题

Angular 中的跨度中存在间隙，但 AngularJS 中不存在

有 2 个等效的组件模板，其中一个是用 AngularJS 编写的： 有 2 个等效的组件模板，其中一个是用 AngularJS 编写的： <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover"> <span class="app-icon app-icon_md soh__trigger" ng-class="status.informationType.iconClass"></span> <span class="soh__content soh__content_multiline app-text_addition-1" ng-bind="status.message"></span> </span> 新的一个是用现代 Angular 编写的： <span *ngFor="let status of statusList" class="show-on-hover"> <span class="app-icon app-icon_md soh__trigger" [ngClass]="appealStatusAdditionalInformationTypesMap[status.informationType].iconClass" ></span> <span class="soh__content soh__content_multiline app-text_addition-1">{{ status.message }}</span> </span> 两者之间的区别在于，在AngularJS中似乎主跨度更大，导致有差距： 而在现代 Angular 中，相同的跨度较小，导致图标之间没有间隙： 生成的html如下（旧的有间隙）： <appeal-status-information status-information="rowData.appealStatusAdditionalInformation" applicant-type="rowData.applicantInfo.applicantType" class="ng-isolate-scope"> <!-- ngRepeat: status in statusInformation.statusList | filter : whereFilter --> <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover ng-scope"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_prime gis-icon gis-icon-main-response" ng-class="status.informationType.iconClass"></span> <span class="soh__content soh__content_multiline app-text_addition-1 ng-binding" ng-bind="status.message">Response received</span> </span> <!-- end ngRepeat: status in statusInformation.statusList | filter : whereFilter --> <span ng-repeat="status in statusInformation.statusList | filter : whereFilter" class="show-on-hover ng-scope"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_action mdi mdi-20px mdi-thumb-up-outline" ng-class="status.informationType.iconClass"></span> <span class="soh__content soh__content_multiline app-text_addition-1 ng-binding" ng-bind="status.message">Appeal status: Information received</span> </span> <!-- end ngRepeat: status in statusInformation.statusList | filter : whereFilter --> </appeal-status-information> 新的没有： <appeal-status-information> <span class="show-on-hover ng-star-inserted"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_prime gis-icon gis-icon-main-response"></span> <span class="soh__content soh__content_multiline app-text_addition-1">Response received</span> </span> <span class="show-on-hover ng-star-inserted"> <span class="app-icon app-icon_md soh__trigger app-icon_cl_action mdi mdi-20px mdi-thumb-up-outline"></span> <span class="soh__content soh__content_multiline app-text_addition-1">Appeal status: Information received</span> </span> <!----> </appeal-status-information> 如您所见，样式相同，但结果却不同。 旧角度的跨度较大可能是什么原因？ <ng-container *ngFor="let status of statusList"> <span class="show-on-hover"> <span class="app-icon app-icon_md soh__trigger" [ngClass]="appealStatusAdditionalInformationTypesMap[status.informationType].iconClass" ></span> <span class="soh__content soh__content_multiline app-text_addition-1">{{ status.message }}</span> </span> </ng-container> 对 ng 使用 ng-container，这样在查看页面时不会使用 html 中的任何空间或高度宽度

带有弯曲文本的克隆在 Fabric.js 版本 5.3.0 中不起作用

我正在使用 Fabric.js 版本 5.3.0。 我想克隆曲线文本并添加到画布。 描述： 克隆不适用于弯曲文本，它不会返回与原始对象相同的克隆对象。 请检查

如何将自定义属性从 `angular-ui-bootstrap` 传递到 `$modal`

有两次我必须打开这样的模式： $modal.open({ templateUrl: "components/prize-info/prize-info.html", windowClass: "奖品信息", 范围...

在单页应用程序中操作 JavaScript 中的 dom 内容

我需要在 Angular 中的组件标签后面附加包含 p 和 h3 的 div 元素 当将其放入 window.onLoad() 内时 仅在重新加载和刷新时有效

迁移到 AngularJS 时保持 SEO 排名

我们正在将 PHP 应用程序迁移到 AngularJS，并希望保持我们的网站排名。显然我们会使用 301 重定向，但是如果你转向 AngularJS 前端，主要搜索引擎会保持 SEO 排名吗...

ui-grid 第二列可以根据第一列的值来判断是否编辑

在此输入图像描述 1.请求是否需要填写“tax_amount”列，由第一列“tax_type”决定， 例如：tax_type = 1，tax_amount可以编辑， 税_...

express 从角度 POST 请求获取所有值作为字符串

我有以下简单的代码，可以使用express向服务器发送POST请求： $http.post('/blah', { 布尔值：真， 字符串布尔值: 'true', 数量：213， 字符串编号：'44444444'， ...

Angular - 可重用的表单组选择组件无法设置默认值

我有角度可重用选择组件，它接受 formControlName 作为@Input。并渲染选择组件，选项作为子组件传递并在 内渲染。 选择。

AngularJS：在嵌套循环内按 $index 进行 ng-repeat 跟踪

我需要第二个 $index 来用于我的嵌套 ng-repeat 循环。我应该如何以及在哪里放置它？ AngularJS 网站说 可以使用 ngInit 为这些属性创建别名。这 可能有用...

ASP.NET Core 8 MVC 未从 AngularJS HTTP Post 请求接收数据

我正在开发 ASP.NET Core 8 MVC 应用程序，并面临一个问题，即我的控制器中的名称参数未接收从 AngularJS 客户端发送的值。以下是相关部分...

POSTMAN 工作时出现 Angular POST 跨源错误

我尝试从我的角度登录服务发布： $http.post('https://xyz/login', { 标题：{ '内容类型'：'应用程序/json'， '一个...

Font Awesome 图标不会在 IE11 中打印

我们正在开发的项目是一个 Angular Web 应用程序。我正在尝试打印使用 FontAwesome 图标作为复选框和其他一些内容的内容列表。当我调用 $window.print() 时

为什么 td max-width 在这种情况下不起作用？

这是我的 HTML： ... 这是我的 HTML： <div class="table-wrapper" ng-app="groupModule"> <table class="tablify stylable" ng-controller="listController"> <thead> <tr> <th>Group Name</th> <th>Parent Group</th> <th>Effect</th> <th class="col-actions">Edit</th> <th class="col-actions">Delete</th> </tr> </thead> <tbody> <tr ng-repeat="group in groups"> <td>{{ group.groupName }}</td> <td>{{ group.parentGroupName }}</td> <td>{{ group.effect }}</td> <td class="col-actions"> <button type="button" class="btn btn-info btn-edit"></button> </td> <td class="col-actions"> <button type="button" class="btn btn-danger btn-delete"></button> </td> </tr> </tbody> </table> </div> 这是我的CSS： .table-wrapper { overflow-y: auto; height: 75%; } table.stylable { text-align: center; width: 100%; } table.stylable th { padding: 5px 0; text-align: center; background-color: #353535; color: white; border-right: 1px solid #DDD; height: 40px; cursor: pointer; cursor: hand; } table.stylable tr { background-color: #EEE; } table.stylable td { background-color: transparent; border-right: 1px solid #DDD; } table.stylable th:last-child, table.stylable td:last-child { border-right: 0px; } table.stylable tr th:first-child { border-top-left-radius: 6px; } table.stylable tr th:last-child { border-top-right-radius: 6px; } table.stylable tr:last-child td:first-child { border-bottom-left-radius: 6px; } table.stylable tr:last-child td:last-child { border-bottom-right-radius: 6px; } table.stylable tr:hover:not(.row-details):not(.selected) { background-color: #AAA; color: white; } table.stylable tr.selected { background-color: #777; color: white; } table.stylable tr:hover td { background-color: transparent; } table.stylable tr.selected td { background-color: transparent; } table.stylable table { width: 100%; } table.stylable td, table.stylable th { padding: 3px 8px; min-width: 65px; } .btn-edit, .btn-delete { position: relative; margin: 5px; border: none; width: 60%; padding: 0; padding-bottom: 60%; height: 0; background-size: contain; } .btn-edit { background-image: url(../images/Edit.png); } .btn-delete { background-image: url(../images/Delete.png); } .col-actions { max-width: 80px; } 如果有人想要，那么这里是角度代码： var groups = [{groupCode: 1, groupName: "Branch / Divisions"}, {groupCode: 2, groupName: "Capital Account", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 3, groupName: "Current Assets", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 4, groupName: "Current Liabilities", natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 5, groupName: "Direct Expenses", natureOfGroup: {natureOfGroupCode: 4, nature:"Expenses"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}}, {groupCode: 6, groupName: "Direct Incomes", natureOfGroup: {natureOfGroupCode: 3, nature:"Incomes"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}}, {groupCode: 7, groupName: "Fixed Assets", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 8, groupName: "Indirect Expenses", natureOfGroup: {natureOfGroupCode: 4, nature:"Expenses"}, effectOfGroup: {effectOfGroupCode: 2, effect: "Profit & Loss Account"}}, {groupCode: 9, groupName: "Indirect Incomes", natureOfGroup: {natureOfGroupCode: 3, nature:"Incomes"}, effectOfGroup: {effectOfGroupCode: 2, effect: "Profit & Loss Account"}}, {groupCode: 10, groupName: "Investments", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 11, groupName: "Loans (Liability)", natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 12, groupName: "Misc. Expenses (Asset)", natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 13, groupName: "Purchase Accounts", natureOfGroup: {natureOfGroupCode: 4, nature:"Expenses"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}}, {groupCode: 14, groupName: "Sales Accounts", natureOfGroup: {natureOfGroupCode: 3, nature:"Incomes"}, effectOfGroup: {effectOfGroupCode: 3, effect: "Trading Account"}}, {groupCode: 15, groupName: "Suspense A/c", natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 16, groupName: "Bank Accounts", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 17, groupName: "Bank OD A/c", alias: "Bank OCC A/c", parentGroupCode: 11, natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 18, groupName: "Cash-in-hand", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 19, groupName: "Deposits (Asset)", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 20, groupName: "Duties & Taxes", parentGroupCode: 4, natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 21, groupName: "Loans & Advances (Asset)", parentGroupCode: 3, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 22, groupName: "Provisions", parentGroupCode: 4, natureOfGroup: {natureOfGroupCode: 2, nature:"Liabilities"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}, {groupCode: 23, groupName: "Reserves & Surplus", alias: "Retained Earnings", parentGroupCode: 2, natureOfGroup: {natureOfGroupCode: 1, nature:"Assets"}, effectOfGroup: {effectOfGroupCode: 1, effect: "Balance Sheet"}}]; angular.module('groupModule', []) .controller("listController", function($scope){ $scope.groups = groups.map(function(g){ return { groupCode: g.groupCode, groupName: g.groupName, parentGroupName: groups.filter(function(x){ return x.groupCode == g.parentGroupCode; })[0] == undefined ? 'Primary' : groups.filter(function(x){ return x.groupCode == g.parentGroupCode; })[0].groupName, nature: g.natureOfGroup == undefined ? '' : g.natureOfGroup.nature, effect: g.effectOfGroup == undefined ? '' : g.effectOfGroup.effect }}); }); 这是 JSFiddle 重现问题： https://jsfiddle.net/Vishal1419/n7qmt8wt/ 对于表格单元格，应使用 width 属性，因为表格单元格的“最小宽度”和“最大宽度”未定义。请参阅规格： 'min-width' 和 'max-width' 对表格、内联表格的影响， 表格单元格、表格列和列组未定义。 您只需记住单元格也会收缩到给定宽度以下，因为 CSS 根据表格的宽度和单元格内容计算单元格的宽度。 因此您可以使用固定表格布局它将改变宽度计算背后的算法。 但是我通常做的是用div元素制作自己的网格，而不是使用表格（因为它们的奇怪行为）。 发生这种情况是因为您已经在表中应用了width:100%，并且 td 或 th 将根据表宽度决定其宽度。 为此，您必须从表格中删除 width:100%，然后您才能在 td/th 中应用 max-width 或 min-width 看到这个小提琴：https://jsfiddle.net/n7qmt8wt/3/ 人们用于餐桌的另一个不错的选择是 table { width: 100%; table-layout: fixed; } 表格布局 CSS 属性定义用于布局表格单元格、行和列的算法。 固定值： 表和列的宽度由表和列元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽。 这完全取决于您是否会使用它，但这是保持桌子100%宽且每个<td>或<th>具有相同尺寸的好方法。

Mat 日期选择器发送了错误的日期

我有此输入用于选择日期 {{“日期”|翻译}} ...

我想更改特定组件/当前组件的区域设置

我正在开发一个 Angular 17 应用程序，我在其中实现了 i18n 以实现国际化。最初，我将阿拉伯语设置为整个应用程序的默认语言。现在，我需要切换到

AngularJS路由架构、页面交互

我有一个网络应用程序，其中包含一个迷你 SPA，这是一个非常复杂的工作表。该工作表可以包含数十页，每页都有数十个字段以及指向工作表其他部分的链接。当前...

Chart.js（圆环图）中的内半径未更改

我正在使用 Chart.js 我想要一个半圆环图，如下图所示。但我没能改变馅饼的厚度。我尝试了属性innerRadius但它仍然不起作用 这是我的

Angular UI 路由器视图不显示任何内容

我无法让 UI-Router 工作，这真的很烦人，因为我正在从我构建的另一个工作正常的网站上构建一个网站。目前，ui-view 没有显示任何内容，而 ui-sref...

在WEBHDFS REST Api中启用跨域访问以供JavaScript使用？

我尝试从 Webhdfs Rest api 获取 liststatus，但出现以下错误。 XMLHttpRequest 无法加载 http://:50070/webhdfs/v1/?op=LISTSTATUS。没有“访问-控制-允许-或...”

拥有可扩展的图例项目

我无法找到与此相关的任何内容，因此我试图在这里获得一些见解。 有没有办法以部分方式构建图表（任何图表，但让我们以条形图为例）...