angularjs 相关问题

我有一个数组，保存4个数据：[onHour，onMinute，offHour，offMinute]，并且我有4个数据，它们不在数组中重复。我有一个数组，保存 4 个数据：[onHour、onMinute、offHour、offMinute]，并且我有 4 个数据，它们不在数组中重复。 <div class="on"> <mat-form-field appearance="fill" class="time_field"> <mat-label>minute</mat-label> <input matInput type="number" formControlName="minute_glow_periodic" min="0" max="59"> </mat-form-field> <mat-form-field appearance="fill" class="time_field"> <mat-label>hour</mat-label> <input matInput type="number" formControlName="hour_glow_periodic" min="0" max="24"> </mat-form-field> </div> <div class="off"> <mat-form-field appearance="fill" class="time_field"> <mat-label>minute</mat-label> <input matInput type="number" formControlName="minute_glow_periodic" min="0" max="59"> </mat-form-field> <mat-form-field appearance="fill" class="time_field"> <mat-label>hour</mat-label> <input matInput type="number" formControlName="hour_glow_periodic" min="0" max="24"> </mat-form-field> </div> 在 .ts 组件中我有这个变量periodicValues = [this.hourGlowPeriodic?.value, this.minuteGlowPeriodic?.value, this.hourSilencePeriodic?.value, this.minuteSilencePeriodic?.value]; 通过提交按钮填写界面，但我不知道如何使用 periodicValues[] 上的 ngOnInIt 数组填充表单控件我已经尝试过这个表格，但没有成功 this.form = this.formBuilder.group({ hour_glow_periodic: new UntypedFormControl({ value: this.data.element?.periodic_values[0], disabled: false }), minute_glow_periodic: new UntypedFormControl({ value: this.data.element?.periodic_values[1], disabled: false }), hour_silence_periodic: new UntypedFormControl({ value: this.data.element?.periodic_values[2], disabled: false }), minute_silence_periodic: new UntypedFormControl({ value: this.data.element?.periodic_values[3], disabled: false }), }); 您可以使用值 formControlName 和 hour_silence_periodic 更新 HTML 中的最后两个 minute_silence_periodic，除此之外，根据提供的数据，您的代码看起来不错，请找到下面的工作示例，请与问题分享如果复制的话。 import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; import { provideAnimations } from '@angular/platform-browser/animations'; @Component({ selector: 'app-root', standalone: true, imports: [ ReactiveFormsModule, CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, ], template: ` <form [formGroup]="form"> <div class="on"> <mat-form-field appearance="fill" class="time_field"> <mat-label>minute</mat-label> <input matInput type="number" formControlName="minute_glow_periodic" min="0" max="59"> </mat-form-field> <mat-form-field appearance="fill" class="time_field"> <mat-label>hour</mat-label> <input matInput type="number" formControlName="hour_glow_periodic" min="0" max="24"> </mat-form-field> </div> <div class="off"> <mat-form-field appearance="fill" class="time_field"> <mat-label>minute</mat-label> <input matInput type="number" formControlName="hour_silence_periodic" min="0" max="59"> </mat-form-field> <mat-form-field appearance="fill" class="time_field"> <mat-label>hour</mat-label> <input matInput type="number" formControlName="minute_silence_periodic" min="0" max="24"> </mat-form-field> </div> </form> `, }) export class App { name = 'Angular'; data = { element: { periodic_values: [1, 2, 3, 4], }, }; form: FormGroup = new FormGroup({}); constructor(private formBuilder: FormBuilder) {} ngOnInit() { this.form = this.formBuilder.group({ hour_glow_periodic: new FormControl({ value: this.data.element?.periodic_values[0], disabled: false, }), minute_glow_periodic: new FormControl({ value: this.data.element?.periodic_values[1], disabled: false, }), hour_silence_periodic: new FormControl({ value: this.data.element?.periodic_values[2], disabled: false, }), minute_silence_periodic: new FormControl({ value: this.data.element?.periodic_values[3], disabled: false, }), }); } } bootstrapApplication(App, { providers: [provideAnimations()], }); 堆栈闪电战

angular angularjs typescript angular-material

回答 1 投票 0

使用 angularjs 进行文件上传

我正在使用 angularjs 进行文件上传。我收到响应，但无法将该文件存储到本地磁盘中。控制器（功能（） { '使用严格'；有角的 .module('应用程序.消息') .控制...

angularjs

回答 2 投票 0

如何使用 intl-tel-input lib 创建自定义电话号码指令

我目前正在尝试创建一个自定义指令，该指令将使用以下库初始化输入：intl-tel-input。所以我用 Bower 下载了所需的 .js 文件： <p>我目前正在尝试创建一个自定义指令，该指令将使用以下库初始化输入：<a href="https://github.com/Bluefieldscom/intl-tel-input" rel="nofollow noreferrer">intl-tel-input</a>。</p> <p>所以我用 Bower 下载了所需的 <pre><code>.js</code></pre> 文件：</p> <pre><code><script src="bower_components/intl-tel-input/build/js/intlTelInput.min.js"></script> </code></pre> <p>然后我创建我的输入：</p> <pre><code>input type="tel" class="form-control" id="tel" name="tel" ng-model="informations.tel" ng-keyup="checkPhoneFormat()" ng-click="checkPhoneFormat()"> And I'm initializing it at the beginning of my controller like this : angular.element('#tel).intlTelInput({ validationScript: "../../bower_components/intl-tel-input/lib/libphonenumber/build/isValidNumber.js", preferredCountries: ['en', 'fr'] }); </code></pre> <p>我的问题是，当我尝试访问 <pre><code>informations.tel</code></pre> 模型时，它始终是未定义的。看来输入不会动态更新模型值。</p> <p>所以我必须写这样的东西来将我的输入字段的实际值与我的未更新的模型值绑定：</p> <pre><code>$scope.checkPhoneFormat = function(){ $scope.informations.telephone = angular.element('#telephone').val(); ...} </code></pre> <p>可能没问题，但我想创建一个自定义指令来初始化此类输入，例如：</p> <pre><code>app.directive('phoneInput', function (PhoneFactory) { return { require: 'ngModel', restrict: 'A', scope: { phoneNumber: '=' }, link: function (scope, element, attrs, ctrl) { element.intlTelInput({ validationScript: "../../bower_components/intl-tel-input/lib/libphonenumber/build/isValidNumber.js", preferredCountries: ['en', 'fr'] }); ctrl.$parsers.unshift(function(viewValue) { console.log(viewValue); }); } }; }); </code></pre> <p>但是由于 <pre><code>ngModel</code></pre> 未定义，因此永远不会到达初始化函数。</p> <p>我该如何解决这个问题？</p> </question> <answer tick="true" vote="12"> <p>你是对的，模型不会自动更新。你可以制定这样的指令</p> <pre><code>app.directive('intlTel', function(){ return{ replace:true, restrict: 'E', require: 'ngModel', template: '<input type="text" placeholder="e.g. +1 702 123 4567">', link: function(scope,element,attrs,ngModel){ var read = function() { var inputValue = element.val(); ngModel.$setViewValue(inputValue); } element.intlTelInput({ defaultCountry:'fr', }); element.on('focus blur keyup change', function() { scope.$apply(read); }); read(); } } }); </code></pre> <p>可以这样称呼</p> <pre><code><intl-tel ng-model="model.telnr"></intl-tel> </code></pre> <p>这是一个<a href="http://plnkr.co/edit/KZzTURvvcEWl7XiNzLwC?p=preview">Plunker</a></p> </answer> <answer tick="false" vote="4"> <p>有一个新指令，称为 International-phone-number @ <a href="https://github.com/mareczek/international-phone-number" rel="nofollow">https://github.com/mareczek/international-phone-number</a></p> <p>请结帐，欢迎任何贡献</p> </answer> <answer tick="false" vote="4"> <p>我们中的一些人使用了 Marks 的指令，但缺乏测试以及 jquery 在头部所需的位置导致了问题，因此创建了 <pre><code>ng-intl-tel-input</code></pre>：</p> <p><a href="https://github.com/hodgepodgers/ng-intl-tel-input" rel="nofollow">https://github.com/hodgepodgers/ng-intl-tel-input</a></p> <p>检查一下，它的单元和功能都用量角器进行了测试在这里玩一下：</p> <p><a href="http://hodgepodgers.github.io/ng-intl-tel-input/" rel="nofollow">http://hodgepodgers.github.io/ng-intl-tel-input/</a></p> </answer> <answer tick="false" vote="2"> <p>马克的指令对我有用： <a href="https://github.com/mareczek/international-phone-number" rel="nofollow">https://github.com/mareczek/international-phone-number</a></p> <p>intl-tel-input（至少在 v3.6 中）的一个问题是，它不会正确格式化您初始化时使用的电话号码*，除非您前面有一个加号（“+”）。这会导致我的用户出现奇怪的行为。我将标准化的电话号码（没有加号）存储在数据库中，因此我需要一个技巧来解决这个问题。我没有在服务器上格式化，而是选择在前端格式化电话号码。我在 Mark 的指令中添加了以下内容以获得我需要的行为：</p> <pre><code>var makeSureInitialValueStartsWithPlusSign = function() { var clear_watcher = scope.$watch(attrs.ngModel, function(changes) { elem_val = element.val(); if (elem_val && elem_val[0] != "+") { element.val("+" + changes); clear_watcher(); } }); }; makeSureInitialValueStartsWithPlusSign(); </code></pre> <p>谢谢马克</p> <p>*正确地说，我的意思是将“19734566789”转换为“+1 973-456-6789”。 int-tel-input 将“19734566789”转换为“1 973-456-6789”（不带 pus）。当用户去编辑它时，他们会遇到奇怪的行为，因为加号不存在。</p> </answer> </body></html>

angularjs directive

回答 0 投票 0

如何更改计时员的输入字体大小？

我想更改此输入的大小这里是.html组件我想更改此输入的大小此处 .html 组件 <div class="time-picker" dir="ltr"> <ngx-timepicker-field [defaultTime]="'00:00'" [format]="24" [clockTheme]="theme"></ngx-timepicker-field> </div> 这里是.ts组件 import { NgxMaterialTimepickerTheme } from 'ngx-material-timepicker'; theme: NgxMaterialTimepickerTheme = { container: { bodyBackgroundColor: '#25bcbd', buttonColor: '#fff', }, dial: { dialBackgroundColor: '#4fcbcc', }, clockFace: { clockFaceBackgroundColor: '#e6e7e8', clockHandColor: '#25bcbd', clockFaceTimeInactiveColor: '#4f5757', }, }; 我搜索了没有找到解决办法！文档中没有配置，而是像这样使用自定义 CSS 解决方案。 .custom-timepicker-css { .timepicker-dial__container { margin-top: 20px; } .timepicker-dial__control { font-size: 20px !important; width: 30px !important; } .timepicker-dial__time { font-size: 20px !important; } } html <ngx-mat-timepicker timepickerClass="custom-timepicker-css" #timepicker [enableKeyboardInput]="true" [max]="maxTime" [min]="minTime" ></ngx-mat-timepicker> 堆栈闪电战

html css angular angularjs

回答 1 投票 0

HTTP 拦截器在 Angular 17 项目中不起作用

我的 AuthInterceptor.intercept 方法没有被调用。将所有必要的代码放在下面。我的代码流程：login.component中的FormSubmit()方法调用login.serv中的generateToken()方法...

angularjs angular-httpclient angular-http-interceptors angular-httpclient-interceptors

回答 1 投票 0

AngularJS 对单击的 span 元素进行过滤会从表中删除数据

在下面的代码中，我尝试使用 ng-repeat 属性中的过滤器来根据单击的 span 元素或在搜索文本框中输入的文本进行过滤。我正在使用...

javascript angularjs

回答 1 投票 0

为什么每次刷新时我的html body都会向左移动？

这是我遇到过的最奇怪的错误之一。有可能它是一个扩展程序或浏览器错误或其他东西，但它仅在我在开发中刷新它时才显示在我正在构建的应用程序上......

html css angularjs absolute visual-glitch

回答 1 投票 0

AngularJS - 直接链接始终将用户发送到主页

任何指向我的角度应用程序的直接链接最终都会出现在网站的首页上。我该怎么做才能允许直接链接到我网站的特定部分？例如，在我的角度应用程序中，如果有人单击导航 l...

javascript angularjs angular-ui-router

回答 2 投票 0

如何调用多个$http.post请求？

我在控制器中调用保存函数，如下所示： vm.save = 函数(onSaveSuccess, onSaveFailed) { 变量数据 = { “id”：虚拟机 ID， “名称”：虚拟机名称 }; myService.upda...

javascript angularjs

回答 1 投票 0

大写过滤器在角度翻译内不起作用

我正在尝试以大写形式显示按钮的文本。由于涉及本地化，因此将从相应的语言文件中获取按钮文本。语言切换效果很好，

html angularjs translation uppercase

回答 4 投票 0

带有独立组件的 TranslateLoader [Angular16]

我有一个 Angular 16 独立应用程序，但我在翻译导入时遇到问题。我当前的代码如下所示：主要.ts *一些不相关的进口* 导入 { bootstrapApplication } ...

angular angularjs angular16 angular-standalone-components

回答 1 投票 0

错误：使用 Yeoman 生成器无法在 AngularJS 中找到模块“ansi-styles”

我的代码以前可以工作，但似乎已经停止工作了。我尝试了 Angular:route api 但返回了此错误：错误：找不到模块“ansi-styles” 在功能.模块。

javascript angularjs npm yeoman yeoman-generator

回答 4 投票 0

AngularJS 在 $q.reject 之后没有释放回调锁

我在服务中有 AngularJS 代码，如下所示：函数 getData(id) { 返回 $http.get(baseURL + "/id").then(function (resp) { 返回相应数据； },

angularjs

回答 1 投票 0

Django REST 框架 + Angular 项目上的令牌认证

我正在使用DRF和Angular，其客户端环境是移动设备。我找到了 django-rest-auth 包。我毫不犹豫地选择了它，因为它提供了 TokenAuthentication

angularjs django-rest-framework django-authentication http-token-authentication

回答 1 投票 0

如何在角度16中检测页面刷新

我有一个 Angular 12 中的代码，可以正常工作，但不能在 Angular 16 中工作。请提出更改建议。这是我的代码： this._router.events .pipe(filter((rs): rs 是 NavigationEnd => rs

javascript angular angularjs angular16

回答 1 投票 0

angularjs 相关问题

最新问题