如何在angular 6中使用jquery更新ngModel？
在Angular 6中使用jQuery更新ngModel的方法如下：
- 首先，确保已经安装了jQuery和@types/jquery依赖。可以通过以下命令安装它们：
npm install jquery
npm install @types/jquery- 在angular.json文件中的"scripts"数组中添加jQuery的引用。例如：
"scripts": [
"node_modules/jquery/dist/jquery.min.js"
]- 在组件的.ts文件中引入jQuery：
import * as $ from 'jquery';- 在ngAfterViewInit生命周期钩子中，使用jQuery选择器获取要更新的元素，并使用jQuery的val()方法更新ngModel的值。例如：
ngAfterViewInit() {
$('#myInput').val('New Value').trigger('input');
}在上面的例子中，假设有一个id为"myInput"的输入框，我们使用jQuery选择器获取该输入框，并使用val()方法设置新的值。然后，使用trigger('input')方法触发input事件，以便更新ngModel的值。
需要注意的是，使用jQuery来更新ngModel可能会绕过Angular的变更检测机制，因此需要谨慎使用。在大多数情况下，应该优先考虑使用Angular的数据绑定和事件绑定来更新ngModel的值。
相关·内容
2回答
我正在为一个AngularJS数据选择器插件做一个jQuery指令，当数据采集日期发生变化时，这个插件应该会更新ng模型。
以下是目前为止的代码：
angular.module('bootstrap-timepicker', []).directive('timepicker', [
function() {
var link;
link = function(scope, element, attr, ngModel) {
element.datetimepicker();
element.on('dp.c
浏览 2提问于2015-03-02得票数 4
回答已采纳
我使用Angular2 ng-表单，我喜欢它如何自动判断表单上的所有控件是否有效，如果是，则启用我的表单提交按钮。但是，如果我在其中一个控件上使用了一个很酷的jquery插件，比如我的示例中的datedropper，那么表单将保持无效，直到基础输入控件有效为止。
以下是我的HTML表单：
<form name="submitForm" #submitForm="ngForm">
<div class="group">
<input class="spring-date sp
浏览 2提问于2017-03-08得票数 2
回答已采纳
我一直在开发一个自定义输入包装器，它增加了错误文本处理等功能。问题是我不能重置模型值，从检查作用域开始，外部作用域在重置时得到更新。指令的内部作用域没有，我不确定为什么。
将指令中的ng模型监视从作用域.$ watch (ngModel，function() {更改为作用域.$watch(‘ngModel’，function() {导致重置工作，但是当viewValue无效时重置不工作，在这种情况下重置也应该工作。
我是不是做错了什么？下面的代码报告了这个问题。
var app = angular.module('app', []);
app.directive('
浏览 2提问于2016-01-12得票数 0
我正在尝试使用ngModel将jquery minicolors合并到绑定到文本框的angular directive.The指令中。当我输入颜色代码时，手表会检测到更改的值，但当我使用colorpicker选择它时，该值不会反映在范围variable.Can中。
<input minicolors="colorPickerSettings" type="text" data-ng-model="category.ToBeConfirmedEventColor">
angular.
module('myApp',
浏览 0提问于2014-01-23得票数 1
嗨，哪个更好？有什么关系？优点和缺点是什么？
以下是两者的比较代码：
作用域：{ ngModel:'=‘}
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="app">
<input ng-model="code"></my-di
浏览 1提问于2016-06-03得票数 5
回答已采纳
我想使用javascript在单击按钮时更新ngModel的值。我试过了，但不起作用。 index.html <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<my-app>loading</my-app>
<script>
$scope.$apply(function() {
// every changes goes here
$('#t'
浏览 25提问于2018-12-20得票数 1
回答已采纳
我有一个带有ng-model的表单输入以及我的自定义指令，它读取cookie数据并设置输入值：
<form>
<input type="text" id="name" ng-model="name" my-cookie-directive>
</form>
我的指令：
angular.module('myApp.directives').directive('myCookieDirective', ['CookieService', function(Co
浏览 4提问于2014-05-06得票数 3
回答已采纳
我在天使语方面比较新。我只是尝试使用自定义指令更新输入txt值。但我做不到。在这里，我已经展示了我的代码，我做错了这个代码。有人帮我解释一下它是如何工作的。
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl',MyCtrl);
function MyCtrl($
浏览 2提问于2015-10-07得票数 2
回答已采纳
使用具有以下图案的angular2和angular2-material：
<form #userForm="ngForm" style="background-color: rgba(209,216,239,0.29)" layout-padding="20px">
<div layout="row" layout-margin>
<md-input-container flex>
<input md-input
浏览 11提问于2017-02-05得票数 1
编辑
如果它对它出错的代码有帮助，那么
// Update model when calling setContent (such as from the source editor popup)
setup: function (ed) {
ed.onSetContent.add(function (ed, o) { <----Right Here ed is undefined
if (ed.isDirty()) {
ed.save();
ngM
浏览 0提问于2013-04-26得票数 0
回答已采纳
2回答
在这里，我为日期选择器创建了一些示例，它工作得很好，但是我需要动态地设置min和max日期。因此，我从Html中传递开始日期和结束日期，比如min min="2013-07-23“max="2015-07-23”，我得到了这个值，我需要在控制器$scope.datepickerOptions ={ startDate :min，endDate:max}中设置这个值。
var app = angular.module('myapp', ['ng-bootstrap-datepicker'])
app.directive('myDate
浏览 2提问于2015-12-31得票数 4
回答已采纳
//main controller
angular.module('myApp')
.controller('mainCtrl', function ($scope){
$scope.loadResults = function (){
console.log($scope.searchFilter);
};
});
// directive
angular.module('myApp')
.directive('customSearch', function () {
return {
浏览 3提问于2015-10-16得票数 8
回答已采纳
1回答
angular 9形式的双向绑定
、、、、
在angular 9表单中的双向绑定我尝试在表单中使用(ngmodel)，但它给出了错误，这在angular 6和更高版本中是不存在的
浏览 13提问于2021-04-07得票数 0
定义作用域以在anuglarjs可排序指令上添加回调函数会破坏排序功能。
我找到了一个简单的指令，它位于jquery之上，用于直观地排序列表。我想添加一个函数回调，这样我的控制器就可以在列表被排序时得到通知，这样我就可以调用服务器进行排序，如果在服务器上以及这种排序需要持久的话。
我在指令中添加了一个作用域对象，并定义了一个回调，但是添加这个作用域对象的行为会扰乱排序。实际上它不再是视觉上的排序了。最终，我希望能得到这样的消息:已经发生了这样的事情。有什么想法吗？
这个psi-sortable将放在ul标记上，并且它期望ng模型是有问题的列表。我只是想添加一个回调，这样我就可以知道发生了什么事
浏览 0提问于2019-05-24得票数 1
回答已采纳
是否可以在Angular2中使用jQuery表单验证器？我已经尝试了一个基本的表单，发现验证没有发生。
<div class="modal-body">
<form action="" id="testForm" ngNativeValidate>
<div class="form-group">
E-mail
<input name="email"
data-va
浏览 3提问于2017-10-06得票数 0
我已经将ng2的webpack指南反向移植到了ng1 -
我有3个入口文件- polyfill.ts，vendor.ts和main.ts。这就是webpack将它们加载到浏览器中的方式。我在vendor.ts中添加了以下内容
import 'jquery';
import 'angular';
import 'angular-ui-router';
import 'angular-ui-bootstrap';
import 'angular-loading-bar';
import 'checklist-
浏览 6提问于2016-11-22得票数 2
这是我在chrome中遇到的错误：
UserComponent.html:7 ERROR TypeError:无法读取未定义的属性“formData”，在Object.eval at Object.debugUpdateDirectives at checkAndUpdateView (core.js:23307) at callViewAction (core.js:23548) at execComponentViewsAction (core.js:23490) at checkAndUpdateView (core.js:23313) at callViewActio
浏览 0提问于2019-06-15得票数 3
回答已采纳
1回答
我正在使用jQuery插件select2，希望在AngularJS中调用select2函数。我知道可以使用，但是页面设计需要jQuery插件select2。
我想更改模型角度中的值，并更改select2的值。
我创建了Angular指令，我想调用select2函数，但不知道如何正确地实现它：
angular.module("myModule").directive("select2Value", [
function() {
return {
restrict: 'A',
require: 'ngMod
浏览 0提问于2016-08-23得票数 0
1回答
将ngModel绑定到复杂数据
、、、、
一段时间以来，我一直在研究如果，以及如何将复杂模型绑定到ngModel。有一些文章展示了如何对简单数据(例如字符串)(如 )进行处理。但我想做的是更复杂。假设我有一堂课：
export class MyCoordinates {
longitude: number;
latitude: number;
}
现在，我将在应用程序周围的多个地方使用它，所以我想将它封装到一个组件中：
<coordinates-form></coordinates-form>
我还想将这个模型传递给组件，使用ngModel来利用诸如角形式之类的东西，但到目前为止没有成功。下面是
浏览 5提问于2017-05-19得票数 3
回答已采纳
2回答
我使用的是AngularJS，我创建了一个需要‘ngModel’的指令：
'use strict';
angular.module('spot.im.embed').directive('sayBox', ['$sce', '$timeout', '$parse',
function($sce, $timeout, $parse) {
return {
restrict: 'EA',
require: '
浏览 4提问于2014-08-10得票数 7
回答已采纳
我正在与AngularJS和.net核心一起工作。一般来说，我的想法是用角度显示数据，并从WebAPI内核调用.net。提供数据这不是一个问题，因为目前我没有完成的数据发布，因为我有问题，在显示表单，我应该张贴的地方。
app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
imp
浏览 1提问于2017-07-21得票数 0
回答已采纳
1回答
我想在angularjs控制器中获得引导datetimepicker选择器的输入值。我正在使用以下自定义指令来实现这一点。但我得到的值是未知的。我已经添加了与html相关的代码和与此问题相关的角度代码。
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.clou
浏览 4提问于2016-11-20得票数 1
回答已采纳
1回答
我正在尝试自学angular 8。从angularjs开始跳跃。我总是发现日期和时间选择器是编码中最令人生畏的部分。我在angular 8中成功地创建了一个漂亮的反应式表单，一如既往地被日期和时间所困扰。所以我使用了输入类型date和time，它在chrome中工作得很好，而在IE中则完全不起作用。去研究bootstrap来进行救援，并想出了这个 <div class="input-group col-md-6">
<div class="input-group-prepend col-md-6" style="paddin
浏览 8提问于2020-07-01得票数 1
回答已采纳
我编写了我的第一个自定义指令ng-file-chosen，它应该将在<input>元素中选择的文件名分配给通过ng模型传入的绑定。
在下面的片段中，ng文件选择的结果绑定到model.file，下面有一个绑定来显示所选的值。
var app = angular.module('app', []);
app.controller('controller', function ($scope) {
$scope.model = {
file: "No file selected"
};
});
var
浏览 3提问于2015-06-07得票数 1
回答已采纳
在我的angular2应用程序中，我有一个google登录oauth登录页面，用户在其中注册google，并且被重定向到配置文件page.On成功登录，我使用
navigateByUrl("/profile");
方法。我还设置了一个模型，它通过DI将用户的电子邮件发送到配置文件页面。我遇到的问题是，配置文件页面的所有内容都没有在method.Only中发布，userName和userEmail值都发布了。这是密码。
Profile.component.html
<form #f="ngForm" (ngSubmit)="addProfile(
浏览 3提问于2017-03-10得票数 1
回答已采纳
angular.module('RatingModule').component('starRating', {
templateUrl: 'rating.html',
controller: RatingCtrl,
bindings: {
maxStars: '=',
ngModel : '='
//上面是我想要在组件绑定中使用ngModel的组件
function RatingCtrl() { i want to use ngModel here }
//
浏览 0提问于2016-08-18得票数 2
2回答
我有一个第三方jQuery应用程序，我有最小的控制权，我不能也不想使用任何其他东西，所以请不要告诉我，我不应该这样做.因此，此应用程序将<select>更改为空值(由我控制)，并希望AngularJS ngModel知道jQuery将该选择更改为另一个值。
除了使用eval()之外，我似乎无法工作，而且我真的不想使用它，所以我尝试了各种不同的解决方案，但是没有任何东西起作用(正如我所说的，除了eval() )。如果我的ngModel是一个简单的名称(名称)，那么我的解决方案实际上是可行的，但实际上它是一个复杂的名称(object.name)，所以如果我被卡住了，这就是我的解决方案。
浏览 3提问于2014-12-30得票数 1
回答已采纳
我有一个angular 6项目。我在一起使用ngModel和formControlName。但angular在下面给了我警告。当我从网格中的按钮打开更新弹出窗口时，我可以很容易地自动绑定更新弹出窗口中的输入。但是angular 7说删除ngModel。因此，我必须始终将所有内容映射到我的学生对象。最好的方法是什么？在下面的代码中，我们可以像studentObject一样给formValueType赋值吗?然后它可以自动绑定吗？
角度警告：
It looks like you're using ngModel on the same form field
as formCon
浏览 0提问于2018-10-04得票数 4
我刚启动Angular2，在我的表单中添加(ngSubmit)属性时会遇到以下错误
Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("
<form [ERROR ->]#form="ngForm" (ngSubmit)="onSubmit()" novalidate>
下面是我在package.json中的一些依赖项。
"dependencies": {
"
浏览 4提问于2016-12-14得票数 3
我制定了一个指令，包装一个jQuery插件：
angular.module('ngJQueryPlugin', [])
.controller('MainCtrl', function ($scope) {
$scope.input = {'hexa': 0};
})
.directive('jQueryPlugin', function ($compile, $parse) {
return {
restrict: 'E',
require:
浏览 0提问于2014-08-05得票数 0
1回答
这段代码在所有主流浏览器中都工作得很好，但是Edge只在DOM检查器中显示有效值，但在页面中仍然是旧值。为什么？
(function (angular, module) {
'use strict';
module
.directive('psEffectsDurationSlider', EffectsDurationSlider);
EffectsDurationSlider.$inject = [];
function EffectsDurationSlider() {
return {
require:
浏览 3提问于2016-06-07得票数 0
2回答
jQuery旋钮渲染问题
、、、
我试图使用一个角度上的jquery旋钮，并创建了一个指令来使用它。
现在，我已经看到了许多jquery旋钮的例子，在其中的大多数例子中，在dial...but的中心都显示了当前的值，而不是我的例子！此外，我如何将数字设置为没有小数呢？
以下是我的html和角指令代码：
<knob ng-model="temp" value="0"></knob>
<input type="text" ng-model="temp">
knob.js
angular.module('knob',
浏览 0提问于2016-01-23得票数 0
回答已采纳
我正在尝试创建一个指令，它将使用与创建该指令的元素相同的ng-model来创建一个输入字段。
这是我到目前为止想出来的：
HTML
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<scr
浏览 90提问于2013-01-02得票数 297
回答已采纳
在Angular(5)中，我试图为模板驱动的表单编写一组可重用的表单控件。它需要能够从父组件中获取模型，并将其传递给元素以进行双向数据绑定。
这就是我所拥有的。
admin-panel.component.ts (父窗体)
import { Component, OnInit } from '@angular/core';
import{ NgForm } from '@angular/forms';
@Component({
selector: 'admin-panel',
template: `
<label>S
浏览 0提问于2018-05-04得票数 0
2回答
我尝试过在StackOverflow上发布的许多方法在Range6组件中使用jquery，但它们都没有工作。例如,
我运行jquery安装jquery 来安装jquery。
包括在angular.json中
“脚本”：[“节点_模块/jquery/dist/jquery.js”，“节点_模块/jquery.js/jQuery-ui.js”，
错误如下：
AppComponent_Host.ngfactory.js [sm]:1ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_1__(...).slider is not a fun
浏览 0提问于2018-09-20得票数 8
回答已采纳
1回答
我正在尝试创建一个指令，在输入后插入元素(该指令被标记)，但也从插入的元素中更新输入。
angular.module('afterDir', [])
.directive('after', function ($compile) {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
scope.clickHandler = function (index) {
浏览 2提问于2013-10-16得票数 1
回答已采纳
我们正在进行一个角度项目，其中有一个组件，它生成一个通过getter加载的列表，该列表生成使用ngModel指令的输入。每次我们更改输入中的值时，都会因为某种原因重新评估项目列表，并重新划分我们不想要的组件。
下面是一个展示这种行为的例子。
import {NgModule,ChangeDetectionStrategy,Component,OnChanges,SimpleChanges,Input} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
impo
浏览 2提问于2017-10-12得票数 1
尽管使用了google等工具，但我没有找到解决问题的方法。谢谢你看一看。
我希望实现以下输入验证行为(使用角ngModelController)：
只有在用户第一次离开字段后才能触发输入验证。但是，如果存在验证错误，验证应该不仅在模糊上触发，而且在更改时触发，以便在错误纠正时立即通知用户。
我创建了一个只有(Post)链接函数的指令，该指令在同一元素上“需要”ngModel。
angular.module('foo').directive('errFB', function(){
return {
restrict: 'A',
浏览 3提问于2014-12-16得票数 4
回答已采纳
1回答
我正在尝试将primeng库包含到我的项目中
package.json
"dependencies": {
"@angular/common": "~2.2.3",
"@angular/compiler": "~2.2.3",
"@angular/core": "~2.2.3",
"@angular/forms": "~2.2.3",
"@angular/http": "~2.2.3
浏览 3提问于2017-04-13得票数 3
我们的应用正在通过bootstrap (angular-ui bootstrap)从jQuery移植到AngularJS。
下面这篇优秀的帖子介绍了一个方便的特性，即如果URL域还没有前缀，则将"http://“前缀”添加到该字段：
我正试图通过一个指令在AngularJS中实现同样的目的，但无法获得在键入时更改ng-Model值的指令。
我已经开始简单地尝试让小提琴在现在的每个更改上添加一个"http://“前缀”(我可以稍后添加逻辑，以便只在需要时添加它)。
app.directive('httpPrefix', function() {
retur
浏览 3提问于2013-10-21得票数 22
回答已采纳
即使在导入CalendarModule并将其添加到AppModule中的导入后，我也发现'p-calendar‘不是已知元素错误 浏览器控制台中的实际错误消息 Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'. 1. If 'p-calendar' is an Angular component and it has 'ngModel' input, then verify that it is part of
浏览 16提问于2020-04-16得票数 0
回答已采纳
我已经创建了一个自定义输入formControl，因此我需要通过(ngModel)获取/设置它的值。
import { Component, Injector, OnInit, forwardRef } from '@angular/core';
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, FormGroup } from '@angular/forms';
@Component({
selector: 'time-picker',
templat
浏览 1提问于2021-04-18得票数 2
回答已采纳
我已经实现了ControlValueAccessor，我在下面的教程中看到了这一点。但是，我实现控件值访问器的组件似乎没有检测到对ngModel的任何更改。我错过了什么吗？
import { Component, OnInit, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@Component({
selector: 'app-counter',
templ
浏览 1提问于2018-01-08得票数 5
回答已采纳
我在表单中的输入上使用了 jquery。当我想从输入字段中获取数据时，它是空的！
这里是我的MaskMoney指令：
import {Directive, ElementRef} from "@angular/core";
declare var $: any;
@Directive({
selector: '[money]'
})
export class CurrencyMaskDirective {
constructor(public el: ElementRef) {
let native = el.nativeElement;
浏览 3提问于2017-06-27得票数 0
app.module.ts：
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
],
register.component.ts：
export class RegisterComponent implements OnI
浏览 1提问于2021-01-16得票数 0
在下面的DOM屏幕截图中，我有一个无线输入。选定的值由角度[(ngModel)]特性确定。您可以在这里看到模型属性与此输入的value属性相匹配，所以我假设这就是它被确定为checked的方式。
但是，虽然我以前遇到过这种情况，并且Angular似乎确实将其作为检查项处理，但在最近的更改之后，我无法辨别，现在checked属性实际上不会作为true返回。一旦我开始选择值，一切都会像预期的那样工作，但它最初设置的值似乎没有注册，即使它反映在HTML中。
checked属性实际上是如何由Angular决定的？将ngModel设置为该值还不够吗？
浏览 2提问于2017-11-28得票数 0
按照提供的示例，我已经按照要求安装了滑块
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Rating</title>
<link rel="stylesheet" type="text/css" href="htt
浏览 1提问于2016-09-01得票数 0
回答已采纳
1回答
使用自己的服务扩展输入
、、、、
我想以这样的方式扩展文本类型的输入，即在用户输入某个文本之后，文本值通过一个自定义过滤器传递，该过滤器在输入时进行一些净化，以下是我到目前为止所做的工作，但我得到了一个错误：
angular.js:13920 TypeError: Cannot read property 'length' of undefined
at addDirective (http://bank.com:4000/vendor/bower_components/angular/angular.js:9495:35)
at collectDirectives (http://bank.c
浏览 2提问于2016-09-03得票数 0
回答已采纳
我正在学习angular，我来自jQuery背景，面临着抓住angular的难题。因此，我经常在理解angular代码中的许多东西时遇到困难。
刚刚看了下面的代码，我不明白下面的指令中的作用域是做什么的？
但是如果我从下面的指令中删除作用域，那么什么将不起作用？所以如果可能的话，请用一个例子帮助我理解作用域的用法和它的重要性。谢谢
<li my-directive price="item.price" ng-repeat="item in products">{{item.name}} — {{item.price}}</l
浏览 1提问于2016-04-10得票数 2
我从中提取了这个指令，效果非常好。
这是我的代码。
angular
.module('app')
.directive("formulaEditor", function() {
return {
restrict: "A",
require: "ngModel",
link: function(scope, element, attrs, ngModel) {
function read() {
ngModel.$setViewValue(element.html(
浏览 0提问于2017-05-09得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
