ng-model使用应注意事项

最新推荐文章于 2023-07-17 14:36:24 发布

转载最新推荐文章于 2023-07-17 14:36:24 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/hrw/blog/852732

本文探讨了AngularJS中使用ng-model时遇到的问题，特别是当其绑定到父作用域中的原始类型属性时的行为差异。文章解释了如何正确设置ng-model以避免意外创建子作用域属性，并提供了最佳实践。

为什么80%的码农都做不了架构师？>>>

Form表单的ng-model为父作用域中的属性，且为原始类型，输入数据后，它不会如你期望的那样运行——AngularJS不会把输入数据写到你期望的父作用域属性中去，而是直接在子作用域创建同名属性并写入数据。

ng-repeat、 ng-switch、ng-view和ng-include 都会创建子作用域

用ng-model进行双向绑定的时候最好加上“.”，如：

ng-model=“data.name”比ng-model="data"要好，因为第一种方式不会在子作用域中创建一个新的data属性，而第二种方式则会在子作用域中创建一个新的data属性。避免因为属性同名而导致的混乱。

ng-repeat对每一个迭代项Item都会创建子作用域, 子作用域也从父作用域进行原型继承。 但它还是会在子作用域中新建同名属性，把Item赋值给对应的子作用域的同名属性。

转载于:https://my.oschina.net/hrw/blog/852732

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34302561

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

angular指令心得（ng-model）

qq_17371033的专栏

10-19

2万+

angular指令心得（ng-model）在项目中编写指令，常常会依赖其他的指令来实现想要达到的功能，其中最常用到的便是ng-model，它为我们明确了需要绑定的属性，虽然在指令中可以通过通过使用独立作用域的”=”来进行双向绑定，但使用ng-model更能简化指令的传值，符合angular的使用习惯。指令依赖angular中编写自定义指令是通过require属性来指定查找依赖指令的controlle

ng-model的用法

weixin_30722589的博客

02-28

272

参考： http://www.cnblogs.com/guanglin/p/5200097.html http://www.runoob.com/angularjs/ng-ng-cloak.html ng-model、ng-bind、{{}} ==》 ng-model，一般用于输入标签，实现数据的双向绑定； ng-bind、{{}}有异曲同工之妙，均可用于实现数据的展示；ng-b...

参与评论您还未登录，请先登录后发表或查看评论

ng-model

Larry的博客

06-17

2124

ng-model 定义和用法 ng-model 指令绑定了 HTML 表单元素到 scope 变量中。如果 scope 中不存在变量, 将会创建它。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angu...

angularjs之ng-model使用问题

hbjiankely的博客

02-19

425

项目使用背景两条数据，修改一条数据的出入场类型，关闭弹框后，另一条数据受影响代码 <input type="radio" value="0" ng-model="entryType" ng-click="modifyEntryType(record.chkRecordId,0)" >出场 <input type="radio" value=&

Angular.JS中指令ng-if的注意事项小结

12-10

前言 ng-if指令可以根据表达式的值true/false在DOM中真正生成或真正移除一个元素。如果赋值给ng-if的表达式的值是false，那对应...这样会导致，在 ng-if 中用基本变量绑定 ng-model ，并在外层 div 中把此 model 绑定给

Angular指令深度解析：ng-options的使用与注意事项

"本文主要探讨Angular指令ng-options的使用方法，包括其用途、特性和注意事项，并解释了select下拉框中label和value的概念。" 在AngularJS中，`ng-options`指令用于根据数组或对象动态生成`<select>`元素的`...

浅谈angular表单提交中ng-submit的默认使用方法

10-17

本文将深入探讨`ng-submit`的默认使用方法及其在实际应用中的注意事项。首先，让我们看看如何在HTML中设置`ng-submit`。在AngularJS中，我们通常会在`<form>`标签内使用`ng-submit`指令，如下所示： ```html ...

AngularJS ng-value 指令____AngularJS 实例.zip

03-09

AngularJS ng-model 指令

网络技术联盟站

07-17

967

ng-model指令是 AngularJS 框架中的一个内置指令，用于实现表单元素和控制器之间的双向数据绑定。通过ng-model指令，可以将用户在表单元素中输入的值自动同步到控制器中的变量，并且当变量的值改变时，相应地更新表单元素的显示。

解决angular双向绑定无效果,ng-model不能正常显示的问题

12-01

今天遇到了个问题，js代码中变量已经变化了，但是html页面中没有正常的显示出来。代码如下： <input type="text" ng-model="paramValue" auto-focus> $scope.paramValue = param; 以上代码就会造成有时input框中无内容的情况，打断点显示$scope.paramValue是有值的，但是页面就是啥都显示不出来。换成下边代码就没问题了： <input type="text" ng-model="searchdata.paramValue" auto-focus> $scope.searchdata.paramVal

Angular中ng-bind和ng-model的区别实例详解

11-29

ng-bind和ng-model的区别 AngularJS的数据绑定有ng-bind和ng-model，一般用于如下： <input ng-model=”object.xxx”> <span ng-bind=”object.xxx”></span> ng-bind是单向绑定，由作用于$scope到view层，且在HTML控件(HTML控件有：input、select、button和textarea)中不可显示。 ng-model是双向绑定，$scope<—>view层。 {{}}用于显示数据。完整代码 <!DOCTYPE html> <html> <meta charset="

AngularJS—ng-model指令

KrissLong的博客

04-17

863

ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 <div ng-app="myApp" ng-controller="myCtrl"> 名字：<input ng-model="name"> </div> <script> var app=angul...

angularJS的ng-model指令

海阔天空

05-09

573

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ng-model指令</title> <script type="text/javascript" src="js/Angular.js"></script> </head> <body> <d

angular自学篇之ng-model

mrhuanhuan的博客

11-28

5751

ng-model指令的五大作用 1.ng-model指令可以将输入框的值与angular创建的变量所绑定（即使用ng-model指令来将输入框的值绑定到控制器属性上） eg:<input ng-model="name"> app.controller（"myCtrl",function ($scope) { $scope.name="zhang san" }） 2.双向绑定...

AngularJS入门（4）---ng-model指令

怕冷的北方姑娘

11-20

327

AngularJS ng-model 指令 AngularJSd的模型（model）实际上就是普通的JS对象，与控制器类似，不需要特别的去扩展任何AngularJS的底层类，也不用去构造（construct）模型对象。可以在模型层中使用任何当前存在的纯JS的类或对象，模型可拥有的属性也不仅限于原始值，任何有效的JS对象或数组都是可以的。只需要将模型简单的指派给$scope,AngularJS就...

Angular之ngModel使用

IT飞牛

05-22

6196

在 Angular 4.x 中对于使用 Template-Driven 表单场景，如果需要实现表单数据绑定。我们就需要引入 ngModel 指令。该指令用于基于 domain 模型，创建 FormControl 实例，并将创建的实例绑定到表单控件元素上。 //ngModel //app.component.ts @Component({ selector: 'exe-app', template: ` <form novalidate #f="ngForm"> Name

Angular JS1学习笔记之一ng-model模型

sofia92的博客

04-20

1679

Angular JS ng-model指令 ng-model用于绑定应用程序（input、select、textarea）的数据到html的controller里。与ng-bind区别在于，input是用于用户输入的，数据要用ng-model从View传输到Controller中，而{{}}和ng-bind是用于从controller中得到数据然后显示在view中的。 ng-model指

ng-model指令使用场景

qq_21119289的博客

12-22

1039

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。