angularJs input框绑定ng-model后js获取不到问题
搬运自:https://blog.csdn.net/fenglongmiao/article/details/81545993
https://www.sheyingtg.com/detail/320191.html
与其他指令一样,ng-controller指令也会创建一个子级作用域,因此,如果在ng-controller指令中添加了元素,并向元素属性增加 ng-model指令,那么ng-model指令对应的作用域属性子级作用域,而并非控制器注入的$scope作用域对象,这点在进行双向数据绑定时,需要引起注意。
在ng-controller方式中,每个包含的元素都拥有自己的作用域,因此,复选框元素也拥有自己的$scope作用域。相对于控制器作用域来说,这个作用域属于一个子级作用域,所以,如果它想绑定控制器中的变量值,必须添加$parent标识,只有这样才能访问到控制器中的变量。
scope.$parent——指向scope的父作用域,在子级作用域中使用scope.$parent.name,来获取对父级作用域的双向绑定。
我的问题:初始化搜索关键字为空字符,控制器始终监听不到关键词输入的变化。
解决方案:在绑定值时添加$parent标识
html:
<input type="text" ng-model="$parent.searchTxt" ng-change="listenTxt()">
js:
$scope.searchTxt = '';
$scope.listenTxt=function(){
console.log('searchTxt',$scope.searchTxt);
}
同理,ng-if指令也会创建一个子级作用域,想要ng-model生效,需要在scope创建一个子对象才行
解决方式:
1.使用$parent
2.使用ng-show(或ng-hide)可以间接解决这个问题。
3.使用$scope创建一个子对象,如
$scope.a = {num: '1'};
<input type="text" ng-model="a.num">
angularJs input框绑定ng-model后js获取不到问题的更多相关文章
- 腾讯云图片鉴黄集成到C# SQL Server 怎么在分页获取数据的同时获取到总记录数 sqlserver 操作数据表语句模板 .NET MVC后台发送post请求 百度api查询多个地址的经纬度的问题 try{}里有一个 return 语句,那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行,什么时候被执行,在 return 前还是后? js获取某个日期
腾讯云图片鉴黄集成到C# 官方文档:https://cloud.tencent.com/document/product/641/12422 请求官方API及签名的生成代码如下: public c ...
- 取值:form表单取值、input框绑定取值
1. form表单取值1.1 方式一,通过<form bindsubmit="formSubmit">与<button formType="submit ...
- 小程序开发 绑定自定义数据data- 及JS获取
1wxml<!-- 茶系显示隐藏函数sectionSelect --><view class="img-fur" data-id="{{item.id} ...
- 【小程序】微信小程序绑定企业微信后怎样获取到用户信息
一.获取access_token 1.https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRECT Cor ...
- 通过定时监听input框来实现onkeyup事件-
问题:因为zepto无法使用onkeyup 事件 解决方法:通过给input框绑定focus 事件,定时的去监听input的值得改变,在鼠标移出input后,清除定时器 <!DOCTYPE ht ...
- bootstrap的两种在input框里面增加一个图标的方式
具体代码如下: <div class="input-group"> <div class="input-icon-group"> < ...
- el-mement表单校验-校验失败时自动聚焦到失败的input框
思路:调用input的focus()事件,聚焦到失败的input框上, 问题:如何获取失败的input框,结合element的校验方法,查看可以提供入口的地方 调用this.$refs[formNam ...
- js input框输入1位数字后自动跳到下一个input框聚焦
// input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...
- js—input框中输入数字,动态生成内容的方法
项目中需要在前端实现: 用户输入数字n,动态生成n个元素,删除n,自动清空n个元素(如图一): 用户输入数字n,失焦生成n个元素,再聚焦修改n,自动清空n个元素(如图二): 图一: 图二: 需求一实现 ...
随机推荐
- fedora 25重新安装引导
引导区被其他系统给覆盖了,重新安装引导 grub2-install /dev/sdb GRUB_SAVEDEFAULT=true BIOS grub2-mkconfig -o /boot/grub2/ ...
- Linux利器 strace [看出process呼叫哪個system call]
Linux利器 strace strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Linux世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必 ...
- dwr中的部分问题和总结
2015-9-1 1.dwr设置同步异步:DWREngine.setAsync(false);//dwr设置为同步 --->使用目的是堵塞js,因为设置这样是为了js进行java的后台数据获取. ...
- Spring学习笔记(4)——IoC学习
IoC理论的背景我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 如果我们打开机械式手表 ...
- 一、hibernate环境搭建
hibernate环境搭建 下载hibernate hibernate的jar 连接数据库的jar 解压hibernate,解压后目录结构 documentation :对应hibernate开发文档 ...
- ReentrantLock的相关方法使用
获取锁定 void lock():常用获取锁定的方法 void lockInterruptibly():如果当前线程未被中断,则获取锁定:如果当前线程被中断,则出现异常 boolean tryLock ...
- 微信小程序的加载机制和运行机制
一.运行机制 冷启动指的是重新启动,热启动指的是5分钟内从后台切换到前台,只有冷启动才能加载最新的包. 小程序什么时候会关闭? 5min后台运行,连续收到两次(2s)系统告警. 二.加载机制 三.小程 ...
- Ubuntu14.04.1LTS不能上网解决方法之一
我们在装好了Ubuntu之后,打开浏览器,显示Server not found. 1.点击网络图标,显示如下: 2.进入etc/NetworkManager,找到 Networkmanager.con ...
- alter update
## sql alter update 添加.修改.删除字段 ## 添加列名alter table 表名 add 列名 列类型;alter table 表名 add 列名 列类型 not null d ...
- Codeforces 1156C 尺取法 / 二分
题意:给你一个数组,问里面最多能匹配出多少对,满足abs(a[i] - a[j]) >= k; 思路:首先肯定要排序. 思路1(尺取法):看了dreamoon的代码明白的.我们可以寻找一个最长的 ...