angularjs 相关问题

为什么 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。没有“访问-控制-允许-或...”

拥有可扩展的图例项目

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

cordova 混合应用程序软导航栏与 bootom 上的菜单栏重叠

我用apache cordova开发了一个android应用程序。我正在使用 angularjs 和 bootstrap。我对某些 Android 设备有问题，这些设备底部有这样的软导航栏。 当软导航...

错误：Angular 服务中未定义 localStorage

我正在开发一个 Angular 应用程序，并在 AuthService 中遇到了 localStorage 的问题。当尝试使用 localStorage 存储用户的电子邮件以进行身份验证时，我...

在 Chrome 中同时打开多个链接作为新选项卡

我尝试在 Google Chrome 的新选项卡中同时打开多个链接，但失败了。 问题： 被弹出窗口阻止 用户允许弹出窗口后在新窗口中打开而不是在选项卡中打开 有了这个，我就可以

无法在“idbobjectstore”上执行“put”，评估对象存储的关键路径未产生值

我支持的基于 Chrome 的应用程序给了我们这个错误。 我试图找出有关该错误的更多信息，但没有成功。 有人可以向我解释一下这可能是什么原因吗？ E...

安装 Node.js 的 Web 服务器

我正在尝试阅读我购买的一本名为“Pro Angular JS”的书，但我无法将 Web 服务器指向正确的端口。所以我进入命令行，运行 Node，然后出现第一个错误...

收到“npm ERR！ ng 新项目上的代码 ENOVERSIONS”

每当我启动任何有角度的新项目时，我都会收到此错误。 npm 错误！代码ENOVERSIONS npm 错误！没有可用的有效版本超时 例如：- ng 新的培训应用程序

Angular 17 点击事件未触发？

我从角度开始，我有以下代码， 应用程序组件.html => {{标题}} 计数为：{{ 计数 }} <...

AngularJS Excel 文件格式或文件扩展名无效错误

我正在尝试从 api 返回的 HttpResponseMessage 下载 xlsx 文件，但下载后打开 xlsx 文件时出现错误。 错误：Excel 无法打开文件 '

Angular Materials：您可以禁用输入的自动完成建议吗？

我只是使用像这样的简单输入容器 姓名 我只是使用像这样的简单输入容器 <md-input-container class="md-block" flex-gt-sm > <label>Name</label> <input md-maxlength="30" name="name" ng-model="name" /> </md-input-container> 输入字段建议之前输入的值，这模糊了一些重要的界面元素，而且在我的情况下也确实没有必要。有什么办法可以禁用这些建议吗？ 将 autocomplete="off" 添加到输入元素，就像这样： <input md-maxlength="30" name="name" ng-model="name" autocomplete="off" /> 请参阅此供您参考。 对于没有 name 属性的输入，或将其值设置为自动填充功能常用的输入（名称、电子邮件、街道、国家/地区...），浏览器通常会忽略 autocomplete="off"。 就我而言，将输入设置为一个不寻常的名称就足够了。 <input type="text" name="someUnusualName" autocomplete="off"> 将 autocomplete="off" 添加到输入中，但对于现代浏览器，请使用 autocomplete="nope" 旧版浏览器 <input md-maxlength="30" name="name" ng-model="name" autocomplete="off" /> 现代浏览器 <input md-maxlength="30" name="name" ng-model="name" autocomplete="nope" /> 以防万一有人和我有同样的经历（因为当前的答案在我的 Chrome 上不起作用），我使用了如下所示的方法并且它有效： <input md-maxlength="30" name="name" ng-model="name" autocomplete="new-password" /> 新浏览器似乎会查看 id 字段或名称字段来确定您要通过自动填充查找的内容。当我想关闭自动填充功能时，我开始倒着拼写。 问题标签 - 自动填充弹出窗口 <input id='cp_state_i' required /> 修复 - 不自动填充弹出窗口 <input id='cp_etats_i' required /> 我的问题是我正在使用州的自动完成选项列表。弹出窗口是一个问题。这是我的修复，可能对你有帮助。 似乎在某些文本字段上起作用的另一件事是这个 <input autocomplete='new-password'/> 我删除 type='text 并且它会停止弹出内容。但无论出于何种原因，它并不能对所有事情都起作用，只是对某些事情起作用。 我不确定为什么浏览器不再支持 autocomplete='off' 。除了简单的登录表单之外，在处理 CRUD 和其他合理操作时，它会带来一些麻烦。 <input type="text" id="example" placeholder="" matInput [(ngModel)]="item.productDescription" [matAutocomplete]="product" [matAutocompleteDisabled]="condition"/> 只需在有效条件下使用 [matAutocompleteDisabled] 属性即可。 只需使用输入type="search"就可以了。在 Google Chrome 版本 92.0.4515.107（官方版本）（arm64）上测试 例如：<input type="search" name="namesearch" id="search-cust" placeholder="Shop Name" style="width:170px" /> 对于现代浏览器，以下内容应该有效： 对于现代浏览器和最新更新，您可以将这两个属性 autocomplete="false" 和 role="presentation" 添加到您的输入中。

角度用户界面网格垂直滚动水平滚动时向上移动

我正在使用 Angular UI 网格，面临这个问题， 当垂直滚动最后滚动到底部时，如果尝试将水平滚动移动到右上角，则垂直滚动会向上移动 请参考这个

在没有 Node.js 的情况下安装 npm

我正在使用 Visual Studio 2015 启动 ASP.NET Core Web 应用程序，并且我想使用带有 TypeScript 编辑功能的 AngularJS 2。 为了使其工作，我需要安装 npm Package Manage...

AngularJs，选择控件，无法使用ng-Model将所选值传递给javascript

在 JavaScript 中 $scope.testNames = ['ABC', 'DEF', 'GHI']; $scope.selTestName = $scope.testNames[0]; $scope.test = 函数(){ $log.debug('selTestName=' + $scope.selTestName); } 在jsp中 在 JavaScript 中 $scope.testNames = ['ABC', 'DEF', 'GHI']; $scope.selTestName = $scope.testNames[0]; $scope.test = function(){ $log.debug('selTestName=' + $scope.selTestName); } 在jsp中 <td colspan="3" class="input-medium"> <select class="span2" ng-model="selTestName" style="font-family: verdana;" ng-options="testName for testName in testNames"> </select></td> {{selTestName}} <td> <button type="button" class="btn btn-small btn-info" ng-click="test()">Test selTestName</button> </td> 当我选择的值更改时，插值 {{selTestName}} 也会相应更改，但是无论我选择什么并按“测试”按钮，在 javascript 端，$scope.selTestName 保持不变，为什么？ 如何使 $scope.setTestName 根据我选择的值进行更改？我已经设置了 ng-Model = "selTestName". 我的angularjs版本是1.2.26 “如果你使用 ng-model，则必须在其中有一个点。”做你的 model 指向一个 object.property 然后你就可以开始了。” 最后我在这里找到了答案： Ng-model 不更新控制器值 问题就在这里 ng-model="selTestName" ng-model需要使用object.property。 像下面这样： $scope.testNames = ['ABC', 'DEF', 'GHI']; $scope.selTestName = {tableName:$scope.testNames[0]}; jsp/html: <select class="span2" ng-model="selTestName.tableName" style="font-family: verdana;" ng-options="testName for testName in testNames"> </select></td> 这成功解决了我的问题。 无论如何，现在还有另一个问题，因为我发现即使 ng-model 不使用 dot.notation，以下内容仍然有效。 https://jsfiddle.net/ejghzyo3/7/ 无论如何，这已经是另一个新问题了，也许我会就此创建一个新问题。