首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 6-通用输入(change)方法,如何判断修改了哪个模型值?

在Angular 6中,通用输入(change)方法可以用于检测表单中的值是否发生了变化。要判断修改了哪个模型值,可以通过传递参数来实现。

首先,在HTML模板中,可以为每个输入框添加(change)事件,并将要修改的模型值作为参数传递给通用输入方法。例如:

代码语言:txt
复制
<input type="text" [(ngModel)]="model1" (change)="onInputChange('model1', $event.target.value)">
<input type="text" [(ngModel)]="model2" (change)="onInputChange('model2', $event.target.value)">

在组件的.ts文件中,定义通用输入方法onInputChange(),接收两个参数:模型名称和新的值。通过判断模型名称,可以确定修改了哪个模型值。例如:

代码语言:txt
复制
export class MyComponent {
  model1: string;
  model2: string;

  onInputChange(modelName: string, newValue: string) {
    if (modelName === 'model1') {
      // 修改了model1的值
      console.log('修改了model1的值:', newValue);
    } else if (modelName === 'model2') {
      // 修改了model2的值
      console.log('修改了model2的值:', newValue);
    }
  }
}

这样,当输入框的值发生变化时,通用输入方法会根据传递的模型名称来判断修改了哪个模型值,并进行相应的处理。

关于Angular 6的更多信息和使用方法,可以参考腾讯云的Angular产品文档:Angular产品介绍

请注意,以上答案仅供参考,具体实现方式可能因项目需求和实际情况而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular2 脏检查过程

每一个组件都有一个变更检测器(change detector ),负责检测模板中所定义的数据绑定。绑定示例:{{todo.text}} 和[todo]=”t”。...Angular 2 里面并没有设计一种通用的机制来实现双向数据绑定(但是,你仍然可以实现双向绑定行为以及ng-model特性。更多内容请点这里。)。...,我们没办法精确地知道到底是哪个属性被改了---译者注。)。...这一机制是如何实现的并不重要。你只要把变更检测策略设置为OnPush就可以了。...有使用过基于可观察模型的框架来构建大型应用经验的人都知道我在说什么。一个可观察对象发生更新可能会导致一大堆可观察对象触发更新,然后就这样一直级联下去。

2.6K80

Angular开发实践(五):深入解析变化监测

什么是变化监测 在使用 Angular 进行开发中,我们常用到 Angular 中的绑定——模型到视图的输入绑定、视图到模型的输出绑定以及视图与模型的双向绑定。...而这些绑定的之所以能在视图与模型之间保持同步,正是得益于Angular中的变化监测。...简单来说,变化监测就是 Angular 用来监测视图与模型之间绑定的是否发生了改变,当监测到模型中绑定的发生改变时,则同步到视图上,反之,当监测到视图上绑定的发生改变时,则回调对应的绑定函数。...变化监测的源头 变化监测的关键在于如何最小粒度地监测到绑定的是否发生了改变,那么在什么情况下会导致这些绑定的发生变化呢?...变化监测的处理机制 通过上面的介绍,我们大致明白了变化检测是如何被触发的,那么 Angular 中的变化监测是如何执行的呢?

1.7K80

Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

> 改变输出: ...那么此处的问题其实就在于,在setInterval的回调函数中去修改数据模型时,没有触发$apply()方法来更新视图,而通过调用Angularjs封装的ng-*方法(例如ng-click点击方法)...下面的实例中,我们将看看controller中的数据模型$scope.testInfo.content的与自定义指令中scope.pagination如何相互影响,是否如定义所说这里的绑定真的是双向的...$emit( )方法通知其父级controller,并在controller中使用$scope.$on( )方法监听同名事件,并修改对应的数据模型。...我们可以回顾一下上面在使用双向数据绑定发生异常时的场景: 使用了原生的定时器(Angular中你应该使用$interval,$timeout服务) 用类原生方法(bind)为元素添加事件监听器,并在回调函数中修改了变量的

3.4K20

如何优雅的玩转 Git

比方说你在自己电脑上改了文件 A,你的同事也在他的电脑上改了文件 A,这时,你们俩之间只需把各自的修改推送给对方,就可以互相看到对方的修改了。...其使用步骤如下: 第一步,安装插件 第二步,提交代码时,按照模板填写 commit message # 生成 Change log 如果你的所有 Commit 都符合 Angular Git Commit...如果该钩子脚本以非零退出,Git 将放弃提交,因此,可以用来在提交通过前验证项目状态或提交信息。 在本章的最后一节,我们将展示如何使用该钩子来核对提交信息是否遵循指定的模板。...gitflow - 应用 fit-flow 模型的工具。...git-tips - Git 小提示 git-town - 通用,高级 Git 工作流支持!

1.5K30

Spark|有向无环图(DAG)检测

01 — Spark背景介绍 Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎。...在无向图的基础上,任何顶点都无法经过若干条边回到该点,则这个图就没有环路,称为有向无环图(DAG图),如下图所示,4->6->1->2是一个路径,4->6->5也是一条路径,并且图中不存在顶点经过若干条边后能回到该点...05 — 有向图如何检测有、无环? 那么,如何检测一个有向图是否是DAG呢?...如下图所示,深度优先遍历方法,已经遍历了节点2和6,并marked了,现在遍历节点1的另一条边,依次遍历3,4,5,6,因为6已经遍历,所以说形成了环路,但是实际上并没有,因此,与实际不符合,只对访问过的元素做标记判断有无环路是错误的...关于有向图有环判断检测的java版源码请参考github之spark文件夹中的directedCycle类(代码参考princeton源码)。

2.7K80

AngularJS中使用表单输入的应用设计

Angular中使用表单元素非常方便。正如我们在前面几个例子中看到的,你可以使用ng-model属性把元素绑定到你的模型属性上。...对于输入元素来说,你可以使用ng-change属性来指定一个控制器方法,一旦用户修改了输入,这个方法就会被调用。...同时,在一开始的时候我们会把文本框的默认设置为0: 但是,以上代码所采取的策略有一个潜在的问题,即,只有当用户在文本框中输入的时候我们才会去计算所需的金额。...当用户在这个特定的输入框中输入时,输入框就会正确地刷新。但是,如果还有其他输入框也绑定到模型中的这个属性上,会怎么样呢?如果接收到服务端的数据,导致数据模型进行刷新,又会怎么样呢?...当用户在这个特定的输入框中输入时,输入框就会正确地刷新。但是,如果还有其他输入框也绑定到模型中的这个属性上,会怎么样呢?如果接收到服务端的数据,导致数据模型进行刷新,又会怎么样呢?

2K60

有向无环图检测

01 — Spark背景介绍 Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎。...在无向图的基础上,任何顶点都无法经过若干条边回到该点,则这个图就没有环路,称为有向无环图(DAG图),如下图所示,4->6->1->2是一个路径,4->6->5也是一条路径,并且图中不存在顶点经过若干条边后能回到该点...,并且也不合常理,Theoretical CS是一门基础性的理论课,怎么可能选修它之前要先完machine learning呢?所以不能有环路,这个图是不正确的。所以,这个图必须为有向无环图!...05 — 有向图如何检测有、无环? 那么,如何检测一个有向图是否是DAG呢?...如下图所示,深度优先遍历方法,已经遍历了节点2和6,并marked了,现在遍历节点1的另一条边,依次遍历3,4,5,6,因为6已经遍历,所以说形成了环路,但是实际上并没有,因此,与实际不符合,只对访问过的元素做标记判断有无环路是错误的

2.6K70

(转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

然后我将展示如何封装第三方组件作为 Angular 组件,以及如何使用输入输出机制实现组件间通信(译者注:Angular 组件间通信输入输出机制可参考官网文档),最后将展示如何使用 ControlValueAccessor...需要明白,不管你使用模板驱动还是响应式表单(译者注:即模型驱动),FormControl 都总会被创建。...原生表单控件数量是有限的,但是自定义表单控件是无限的,所以 Angular 需要一种通用机制来桥接原生/自定义表单控件和 formControl 指令,而这正是 ControlValueAccessor...),你需要把更新的传给这个回调函数,这样对应的 Angular 表单控件也会更新(译者注:这一点可以参考 Angular 它自己写的 DefaultValueAccessor 的写法是如何把 input...当然我们也可以使用 ngOnChanges 生命周期钩子来追踪输入属性 value 的变化,一旦其变化,我们就将该设置为 slider 控件的

3.8K20

Angularjs基础(七)

formCtrl 函数设置了mater 对象的初始,并定义了reset()方法。           reset() 方法设置了user 对象等于master对象。           ...        $scope.email = 'john.doe@gmail.com';       })      实例解析     AngularJS ng-model 指令用于绑定输入元素到模型中...以下列出了一些通用的 API 函数:       angular.lowercase() 转换字符床为小写       angular.uppercase() 转换字符串为大写...      angular.isString() 判断给定的对象是否为字符串,如果是返回true.       ...angular.isNumber() 判断给定对象是否为数字,如果是返回true angular.lowercase()       <div ng-app="myApp" ng-controller

2K70

AngularDart 4.0 高级-生命周期钩子 顶

方法接收当前和前一个属性的SimpleChanges对象。 在ngOnInit之前调用并且每当有一个或多个数据绑定输入属性发生变化时调用。...OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...构造函数本身不是一个Angular钩子。 日志确认输入属性(在这种情况下的name属性)在构造时没有分配的。...构造函数不应仅仅将初始局部变量设置为简单。 ngOnInit是组件获取其初始数据的好地方。 教程和HTTP章节显示了如何。 还要记住,指令的数据绑定输入属性在构建之后才会设置。...日志条目显示为power属性更改的字符串。 但ngOnChanges并没有捕捉到hero.name的变化,这一开始令人惊讶。 当输入属性的改变时,Angular只会调用钩子。

6.2K10

【推荐】git commit 规范和如何在 commit 里使用 emoji

对于通用库、开源项目这类多人维护,而且极大可能别人会来看这份代码的,一定要规范,特别是对于开源项目,往往会要列 Change Log,规范好 commit 节省自己整理 log 的时间,也方便了用户。...“全局模式下,需要 ~/.czrc 配置文件, 为 commitizen 指定 Adapter, 如果你不需要生成 Change Log 可以不用去处理。...使用方法 git commit 时直接在注释中写入表情符号的代码部分即可完成表情 emoji 的提交。...m 'added image to repo :art:' “如果你用 Commitizen,可能不太好把 emoji 放在最前面,因为咱们操作的空间,就在 git cz 后第三次交互提示,也就是在输入...[6] 参考资料 [1] Angular 团队所用的准则: https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines

2K40

前端三大框架vue,angular,react大杂烩

在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新来更新模型数据。 1.2、双向绑定的三个重要方法: $scope.$apply() $scope....2、视图渲染 Angular1    AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。...React 需要 shouldComponentUpdate 或者全面 Immutable,Angular 2 需要手动指定 change detection strategy。...一个组件就是通过这两个属性的在 render 方法里面生成这个组件对应的 HTML 结构。   ...这时,为了更好的考量不同的因素,你需要列出重要的象限,如开发效率,团队喜好,开发周期等时机情况选择哪个框架最合适你当前的团队和项目。

3K90

前端三大框架vue,angular,react大杂烩

在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新来更新模型数据。 1.2、双向绑定的三个重要方法: $scope.$apply() $scope....2、视图渲染 Angular1    AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。...React 需要 shouldComponentUpdate 或者全面 Immutable,Angular 2 需要手动指定 change detection strategy。...一个组件就是通过这两个属性的在 render 方法里面生成这个组件对应的 HTML 结构。   ...这时,为了更好的考量不同的因素,你需要列出重要的象限,如开发效率,团队喜好,开发周期等时机情况选择哪个框架最合适你当前的团队和项目。

2.1K60

KVO 正确使用姿势进阶及底层实现你要知道的KVC、KVO、Delegate、Notification都在这里

、Notification 区别及相关使用场景 KVO 正确使用姿势进阶及底层实现 KVO(key value observing)键值监听是我们在开发中常使用的用于监听特定对象属性变化的方法,常用于监听数据模型的变化从而可以动态的修改对应视图...此时如果点击第二个按钮BTN2不幸的事情就会产生,在button2Clicked方法中会产生野指针错误,因为在该方法中修改了model.balance的,由于前一个视图中没有删除监听器,KVO中仍然有监听器的存在...,那当我们展示DisplayViewController后修改了model.balance的,此时会触发哪个视图的回调函数呢?...但KVO还有一个可能会产生错误的地方,在看下一个栗子之前有一点需要说明,有时候我们可能在一个视图中监听很多模型对象,当然了可以按照我们常用的通过keyPath字符串来判断产生回调的具体是哪个属性,但如果监听很多属性...,这样的方法似乎看起来很凌乱,而且逐一进行字符串判断感觉很浪费资源,并且当我们在后期修改了属性的名称还不能忘记修改监听器的keyPath判断语句,那有什么办法能够取代keyPath吗?

1.5K80

达观数据对AngularJS技术的思考与实践

Controller负责响应于用户输入并执行交互数据模型对象。控制器接收到输入,它验证输入,然后执行修改数据模型的状态的业务操作。...通常认为angular采用了MVC模型的设计模式(也有争论认为MVW或MVVM),后面涉及到的会较为详细解释。...但是需要注意,这种双向绑定仅限于angular的上下文,如果你在AngularJS上下文之外的任何地方修改了model,那么你就需要通过手动调用$apply()来通知AngularJS。例如: ?...Angular依赖注入的方式: 1)最简单的处理依赖的方法,就是假设函数的参数名就是依赖的名字,给出一个注入器可以通过检查声明来获取函数名,从而知道需要的依赖的函数。 ?...注意$inject标记里的和函数声明的参数是对应的。这种方式适合用于控制器的声明,因为控制器有了明确的声明标记。 ? 3)行内标记:这种方法比较方便。下面$window为注入依赖。 ?

5.4K150

检测(代表:angular1)前面说

数据很庞大的时候,双绑性能如何?...脏检测(代表:angular1) 前面说的定时器双绑是扯淡 前面特地埋了个坑,关于Angular脏检查,并不是一些人想象的那样子用定时器周期性进行脏检测(我前面写的那个超级简单的双绑就是人们传闻的angular...而我们前面的vue,当我们在控制台改了数据,就可以马上反映到v层。angular并没有这个操作,也没有意义。...在angular1中,私有变量以$$开头,$$watch是一个存放很多个绑定的对象的数组,用$watch方法来添加的,每一个被绑定的对象属性是:变量名、变量旧、一个函数(用来返回变量新)、检测变化的回调函数...if (bindList[j].tagName == "INPUT") { //更新input的输入

1.6K40

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

当浏览器调用的js代码不在angular执行上下文时,意味着angular无法发现模型的修改。要正确的处理模型修改,执行就要在angular执行上下文中使用apply方法。...只有模型修改的执行在apply方法才能正确的被angular理解,举例,如果一个指令监听dom事件,比如ng-click,它必须计算表达式在 表达式计算后,apply方法执行digest.在digest...如果watch修改了模型中的,将会触发一次 Creation / 创建 根作用域在应用启动的时候由$injector创建,在template linking阶段和指令时将会创建新的子作用域; Watcher...作用域和控制器: 作用域和控制器在下面的情况下相互作用: 控制器使用作用域暴露方法给模板 控制器定义方法可以改变模型 控制器可以注册监视器到模型,在控制器的行为执行后立即执行。...第一次执行callback时,浏览器离开了设置了javascript的文件到相对应的读者判断了它的喜好程度, Angular 修改普通的JavaScript流提供它自己的事件处理循环。

13.2K20
领券