angularjs 相关问题

用于关于开源JavaScript框架AngularJS(1.x)的问题。不要将此标记用于Angular 2或更高版本;相反,使用[angular]标签。

如何将多个农业网格导出到单个Excel,并将每个农业网格数据作为AngularJS中Excel中的不同工作表

我必须将 2 个 ag 网格导出到一个 Excel 工作表中。每个 AG 网格数据对应于 Excel 中的工作表 我尝试了这种方法,但是 getsheetdataforexcel 在 angularjs 中不可用,或者我有......

回答 1 投票 0

倒计时组件:Angular2 中如何防止重新渲染?

我有一个 Angular2 主组件,其中包括许多子组件和一个独立的倒计时组件(在下面的代码中名为“时钟”)。倒计时组件每隔

回答 1 投票 0

jqx-grid - 在不同的表上选择条件

使用 Angular 1.x 和 jqx-grid,我在同一页面上有两个单独的表格(同一范围)。 这些表彼此之间具有一对一的关系。商品表和商品详细信息表...

回答 1 投票 0

嵌入 ngx-monaco-editor 时没有 InjectionToken 的提供者

我正在尝试将 Monaco Editor 嵌入到我正在使用本指南 https://github.com/atularen/ngx-monaco-editor#readme 开发的 Web 应用程序中。我尝试添加 ngx-monaco-editor 标签和 Angular giv...

回答 1 投票 0

ng-model 值中的 AngularJS 日期未传递给控制器

当我单击“检查可用性”按钮时,日期值未传递到控制器 当我单击“检查可用性”按钮时,日期值不会传递到控制器 <div class='input-group date'> <input ng-model="BookedFromDate" type="text" [email protected]("dd/MM/yyyy") class="form-control BookedFDate" style="border-width: 0 0 2px 0;"> <span class="input-group-addon"> <i class="font-icon font-icon-calend"></i> </span> </div> 角度器: $scope.CheckAvailability = function () { alert("Hello, " + $scope.BookedFromDate); }; 忘记 ASP。在 AngularJS 中,输入不需要值。只需填充 ng-model。您可以在控制器中或使用 HTML 中的 ng-init 来完成此操作。要屏蔽/过滤日期,请使用 $filter 服务。通常不会直接使用,所以我建议在ng-init中应用过滤器。 AngularJS 有一个用于此目的的 date 过滤器。 这是一个例子: var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.now = new Date(); $scope.CheckAvailability = function() { console.log("Date:", $scope.BookedFromDate); }; }); <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <div class='input-group date'> <input ng-model="BookedFromDate" type="text" ng-init="BookedFromDate = (now | date : 'dd/MM/yyyy')" class="form-control BookedFDate" style="border-width: 0 0 2px 0;"> <span class="input-group-addon"> <i class="font-icon font-icon-calend"></i> </span> <button ng-click="CheckAvailability()">Click</button> </div> </div> </body> </html> 或者将类型从 text 更改为 date 以完全忽略过滤器和屏蔽。 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.BookedFromDate = new Date(); $scope.CheckAvailability = function() { console.log("Date:", $scope.BookedFromDate); }; }); <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <div class='input-group date'> <input ng-model="BookedFromDate" type="date" class="form-control BookedFDate" style="border-width: 0 0 2px 0;"> <span class="input-group-addon"> <i class="font-icon font-icon-calend"></i> </span> <button ng-click="CheckAvailability()">Click</button> </div> </div> </body> </html> 希望这段代码能有所帮助,在角度上,value标签的用处较少,因为我们以两种方式绑定值。 <body ng-app="app"> <div ng-controller="EditCtrl"> <input type="text" ng-model="item.title" /> <input type="date" ng-model="item.date" /> {{item.date}} </div> </body> 您的代码中似乎可能存在一些问题。首先,当使用 Razor 语法使用当前日期初始化 ng-model 时,应该使用双大括号在 AngularJS 中进行数据绑定。其次,确保 CheckAvailability 函数正确绑定到某个事件,例如单击按钮。这是代码的修改版本: <div class='input-group date'> <input ng-model="BookedFromDate" type="text" value="{{@DateTime.Now.ToString("dd/MM/yyyy")}}" class="form-control BookedFDate" style="border-width: 0 0 2px 0;"> <span class="input-group-addon"> <i class="font-icon font-icon-calend"></i> </span> </div> <button ng-click="CheckAvailability()">Check Availability</button> 在你的控制器中: app.controller('YourController', function($scope) { $scope.CheckAvailability = function () { alert("Hello, " + $scope.BookedFromDate); }; }); 确保您已在项目中包含 AngularJS,并且控制器与 HTML 的相关部分相关联。另外,请确保正确设置 ng-click 指令或其他一些事件绑定以触发 CheckAvailability 函数。

回答 3 投票 0

将字节数组输出转换为 Blob 会损坏文件

我正在使用 Office Javascript API 来使用 Angular 编写 Word 插件。 我想通过 API 检索 Word 文档,然后将其转换为文件并通过 POST 上传到服务器。

回答 3 投票 0

AngularJS 自定义指令和控制器方法不起作用,并且在 Chrome 浏览器中无法到达断点

AngularJS 自定义指令和控制器方法附加到 md-fab 滚动返回顶部按钮。一旦页面向下滚动,md-fab 按钮就会变得可见,并在页面响应时隐藏...

回答 1 投票 0

Angular-ui-grid 分页控件未显示

我使用以下控制器和 HTML 配置来创建分页的 ui 网格: app.controller('AdminProspectGridCtrl', function ($scope, $http, uiGridConstants) { $范围。

回答 1 投票 0

$index 对于所有使用 dir-paginate 的页面都是固定的

我在我的 Angular 应用程序中使用 dirPaginate 指令进行分页。 它工作正常,但问题是我每页显示 10 条记录,但每个页面上的 $index 都重复相同的(1-10)...

回答 3 投票 0

类型错误:无法读取未定义的属性“核心”

我在尝试将数据绑定到数据网格选项时遇到问题。我读到刷新将有助于加载数据,但是当我添加逻辑时它会出错。 HTML 代码: 我在尝试将数据绑定到数据网格选项时遇到问题。我读到刷新将有助于加载数据,但是当我添加逻辑时它会出错。 HTML代码: <div ng-controller="MainCtrl"> <br /> <b>{{msg}}</b> <div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-pagination></div> </div> JavaScript 代码: var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'ui.grid.pagination']); app.controller('MainCtrl', function($scope, $filter, $http, $timeout) { $scope.gridOptions = { enableSorting: true, enableRowSelection: true, enableRowHeaderSelection: false, enableFiltering: true, selectionRowHeaderWidth: 35, rowHeight: 35, multiSelect: true, enableGridMenu: true, columnDefs: [ { name: 'client' }, { name: 'qa_ver' }, { name: 'qa_build_no' }, { name: 'qa_build_date' }, { name: 'prod_ver' }, { name: 'prod_build_no' }, { name: 'prod_build_date' }, { name: 'prod_deploy_date' }, { name: 'deploy_src' } ], data: 'jsonData', paginationPageSizes: [5, 10, 25, 50], paginationPageSize: 5, } $timeout(function() { getJSONData(); $scope.data = jsonData; $scope.gridOptions.data = $scope.data; }, 3000); $scope.gridOptions = { onRegisterApi: function(gridApi){ $scope.gridApi = gridApi;} } $scope.gridApi.core.refresh(); 抛出错误: TypeError: Cannot read property 'core' of undefined at new <anonymous> (dashboard.html:114) at Object.invoke (angular.js:4625) at $controllerInit (angular.js:10027) at nodeLinkFn (angular.js:8965) at compositeLinkFn (angular.js:8333) at compositeLinkFn (angular.js:8336) at compositeLinkFn (angular.js:8336) at publicLinkFn (angular.js:8213) at angular.js:1715 at Scope.$eval (angular.js:17025) 我认为正确的形式应该是: $scope.gridOptions = { enableSorting: true, enableRowSelection: true, enableRowHeaderSelection: false, enableFiltering: true, selectionRowHeaderWidth: 35, rowHeight: 35, multiSelect: true, enableGridMenu: true, columnDefs: [ { name: 'client' }, { name: 'qa_ver' }, { name: 'qa_build_no' }, { name: 'qa_build_date' }, { name: 'prod_ver' }, { name: 'prod_build_no' }, { name: 'prod_build_date' }, { name: 'prod_deploy_date' }, { name: 'deploy_src' } ], onRegisterApi: function(gridApi){ $scope.gridApi = gridApi; } data: 'jsonData', paginationPageSizes: [5, 10, 25, 50], paginationPageSize: 5, } $timeout(function() { getJSONData(); $scope.data = jsonData; $scope.gridOptions.data = $scope.data; }, 3000); $scope.gridApi.core.refresh(); .. .. . }

回答 1 投票 0

如何解决奇数编号的 Node.js 版本不会进入 LTS 状态且不应用于生产节点:16120 UnhandledPromiseRejectionWarning

我尝试创建一个新的角度应用程序ng新应用程序,但出现此错误 检测到 Node.js 版本 v11.0.0。 奇数编号的 Node.js 版本不会进入 LTS 状态,并且不应用于产品...

回答 3 投票 0

有角度的手表未发射

有 1 个 Angular 应用程序,带有 1 个父控制器和一个子控制器。 child中,OBJ-CHILD有1个$watch WATCH-CHILD,触发$emit。 在父级中,有一个监听器...

回答 2 投票 0

通过 ng-bind-html 使用插入的 HTML 中的函数

我从数据库中获取了一个 HTML 字符串,我想通过 ng-bind-html 将其插入到我的 AngularJs 应用程序中。我是这样做的: HTML: <... 我从数据库中获取了一个 HTML 字符串,我想通过 ng-bind-html 将其插入到我的 AngularJs 应用程序中。我是这样做的: HTML: <div ng-bind-html="myBindHtml"></div> JavaScript: $scope.myBindHtml = $sce.trustAsHtml(htmlStringToInsert); 我的 HTML(我想插入)看起来像这样: <button ng-click="testClickEvent()">TestButton</button> 插件工作正常。 现在我编写了一个按钮应该调用的函数(testClickEvent)。这只是将一个字符串输出到控制台。 但这部分不起作用。我猜想我插入的 HTML 与该函数没有绑定。有什么办法可以调用我的函数吗? Angular 代码仅当您在 Angular 上下文中运行时才会执行。当您使用 ng-bind-html 时,它会在 Angular 上下文之外生成,因此像 ng-click 这样的 Angular 事件不起作用,您需要依赖像 onclick 这样的纯 JS 事件,因此请避免使用这些场景,而直接在 Angular 上进行编码,因为解决方案的复杂性! 当需要角度事件并且我们需要直接在前端编码而不是从数据库或其他方法输入时,我们可以避免ng-bind-html var app = angular.module('myApp', []); app.controller('myCtrl', function ($sce, $scope) { $scope.items = []; for (var i = 1; i <= 2; i++) { $scope.items.push({ description: $sce.trustAsHtml('<h2 onclick="console.log(\'hello\')">with onclick item ' + i + '</h2>') }); }; $scope.items2 = []; for (var i = 1; i <= 2; i++) { $scope.items.push({ description: $sce.trustAsHtml('<h2 ng-click="console.log(\'hello\')"> with ng-click item ' + i + '</h2>') }); }; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js" integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div ng-app="myApp"> <div ng-controller="myCtrl"> <div> <div ng-repeat="item in items" ng-bind-html="item.description"></div> </div> <hr /> <div> <div ng-repeat="item in items2" ng-bind-html="item.description"></div> </div> </div> </div>

回答 1 投票 0

如何控制列表元素抛出键盘事件

https://stackblitz.com/edit/react-o1ra7c 用户搜索结果后,用户尝试使用键盘事件箭头需要向下移动。 https://stackblitz.com/edit/react-o1ra7c 用户搜索结果后,用户尝试使用键盘事件箭头需要向下移动。 <div> <input onChange={handleSearchChange}/> <div css={countryDataCss}> {countryList?.map((country) => ( <div key={country.countryCode}> <span css={countryCss}>{country.countryName}</span> <span css={countryDialCodeCss}> {country.countryDialNo} </span> </div> ))} </div> </div> 您可以使用 javascirpt 事件 onkeydown,对于 React 来说是 onKeyDown,它提供了所需的行为,请检查下面的 stackblitz! import React from 'react'; import './style.css'; import { useState } from 'react'; export default function App() { const [searchText, setSearchText] = useState(''); const [selectedCountry, setSelectedCountry] = useState('SG'); const [activeIndex, setActiveIndex] = useState(0); const [selectedDialCode, setSelectedDialCode] = useState('+65'); const countryCodeListResponse = [ { countryCode: 'IND', countryDialNo: '+91', countryName: 'India' }, { countryCode: 'SG', countryDialNo: '+65', countryName: 'Singpare' }, ]; const [countryList, setCountryList] = useState(countryCodeListResponse); function handleSearchChange(e) { const searchText = e.target.value.toLowerCase(); if (countryCodeListResponse) { const updatedList = countryCodeListResponse .filter((el) => el.countryName.toLowerCase().includes(searchText)) .sort( (a, b) => a.countryName.toLowerCase().indexOf(searchText) - b.countryName.toLowerCase().indexOf(searchText) ); setSearchText(searchText); setCountryList(updatedList); } } const onSelectCountry = (code, dialCode) => { setSelectedCountry(code); setSelectedDialCode(dialCode); setSearchText(''); setCountryList(countryCodeListResponse); }; const onKeyDown = (event) => { console.log(event); switch (event.keyCode) { case 38: // arrow up if (activeIndex > 0 && activeIndex <= countryList.length - 1) { setActiveIndex((prev) => prev - 1); } break; case 40: // arrow down if (activeIndex >= 0 && activeIndex < countryList.length - 1) { setActiveIndex((prev) => prev + 1); } break; case 13: const country = countryList[activeIndex]; onSelectCountry(country.countryCode, country.countryDialNo); break; default: break; } }; return ( <div class="dropdown"> <div class="search"> <div> <span>{selectedCountry}</span> <span>{selectedDialCode}</span> </div> <input class="search-input" onKeyDown={(e) => onKeyDown(e)} placeholder="Search" value={searchText} onChange={handleSearchChange} /> </div> <div class="list"> {countryList?.map((country, index) => ( <div onKeyDown={(e) => onKeyDown(e)} className={index === activeIndex ? 'active' : ''} tabIndex="0" key={country.countryCode} onClick={() => onSelectCountry(country.countryCode, country.countryDialNo) } > <span>{country.countryName}</span> <span>{country.countryDialNo}</span> </div> ))} </div> </div> ); } 堆栈闪电战

回答 1 投票 0

在 codeigniter 中启用 cors(restserver by @chriskacerguis)

http.get 请求工作正常。 当 api 移动到服务器时,出现了问题。 客户端使用 angularJs $http.get('http://example.com...

回答 11 投票 0

如何使用旧的 angularJS 1.5.5 应用程序

我必须使用旧的 AngularJS 1.5.5 应用程序进行维护,但我不知道如何为其设置一个好的环境。 我应该安装哪个版本的 NodeJS/NPM 才能使其与 gulp 一起工作......

回答 1 投票 0

如何将 ionic 应用程序作为网站托管在服务器上

我使用 ionic 和 Cordova 创建了 Android 移动应用程序。现在我需要将此应用程序作为网站托管。我对托管网络应用程序没有任何了解。请帮忙。

回答 3 投票 0

如何使用 Angular JS 双击按钮执行操作

使用这个我正在检查右键单击我的按钮如何检查双击我的按钮 ` app.directive('rightClick', function ($parse, $mdMenu) { 返回函数(范围、元素...

回答 1 投票 0

如何在 Angular 中创建面包屑

我想将面包屑添加到我的页面。我有很多条路线,但没有一条有孩子。 我尝试通过创建一个子项来做到这一点,但是有太多到公共页面的重定向。例如; 首页 >

回答 1 投票 0

Render2 无法在 Angular 基本项目中工作

我有一个角度应用程序 Angular-tour-of-heroes ,其结构如下: 源代码 ->应用程序 ->你的组件 ->your-component.component.html ...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.