之前都是在做微信小程序的页面,最近做一些html页面,页面也没什么效果,就弄了几个点击事件,控制一些元素的显示与隐藏。后面用angular来写这些页面,然后就遇到了问题,就是用ng-repeat生成的元素用jq无法获取,jq选择元素在前,ngRepeat在后,这样之前写的点击事件就无法实现了。只能换angular方法来实现。

显示和隐藏好实现,一般是用ng-show,但是ng-repeat出来的元素如何实现点击哪个哪个就出现效果,其他的不受影响?这个问题又让我思考了好久,感觉有点类似于事件委托,然后通过百度解决了这个问题。大家想了解的话可以去看一下:http://blog.csdn.net/qq_20881087/article/details/51002287

贴上我的一些代码吧

html

数据

控制器

通过传入id控制对应id里show的值,然后根据show的值改变显示隐藏状态,因为每个ne-repeat出来的元素对应的id都不一样,所以不管操作哪个对其他的都没有影响。

可能对大牛来说我讲的就是一些简单的东西,希望勿喷我这个菜鸟前端。如果刚好和我一样被这个问题困扰的朋友希望能给你们一点帮助,一起进步。

jq无法获取ng-repeat元素,如何控制ng-repeat元素显示与隐藏?的更多相关文章

  1. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  2. 利用jquery 实现菜单控制对应视图的显示与隐藏

    效果: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta ...

  3. vue学习(十二) 指令v-if v-show 控制页面标签的显示与隐藏

    //html <div id="app"> <input type="button" value="toggle" @cl ...

  4. ExtJS4 自己主动生成控制grid的列显示、隐藏的checkbox

    因为某种原因.须要做一个控制grid列显示的checkboxgroup,尽管EXTJS4中的gridpanel自带列表能够来控制列的显示隐藏,可是有这种需求(须要一目了然) 以下先上图 waterma ...

  5. 前端知识--控制input按钮的显示与隐藏

    if(fm.ReadFlag.value=="readonly"){ var arr = document.getElementsByTagName("input&quo ...

  6. jquery怎么实现点击一个按钮控制一个div的显示和隐藏

    示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...

  7. 前端知识-控制div标签的显示与隐藏

    //将附件信息列表进行隐藏 var tAppendixDiv = document.getElementById("AppendixDiv"); tAppendixDiv.styl ...

  8. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  9. JS控制元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  10. 使用JavaScript控制HTML元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

随机推荐

  1. 17Linux_mariadb_PXE+Kickstart

    Mariadb mariadb-client mariadb-server # yum groupinstall mariadb mariadb-client mariadb-server -y # ...

  2. CentOS7虚拟机配置ip地址

    首先安装后的虚拟机选NAT模式配置vm的虚拟网络编辑器(vmware中的编辑),NAT模式中查看DHCP的范围,配置子网(写成和电脑一样),在linux中进入/etc/sysconfig/networ ...

  3. 不用安装Oracle客户端

    1 pl/sql developer 1.1 下载解压instantclient-basic-nt-12.1.0.2.0. 1.2 在其目录下新建Network/ADMIN/tnsnames.ora文 ...

  4. CamStar insitexmlclient重新封装为.net Core类库

    工作原因经常使用camstar的 InsiteXMLClient类库做二次开发,但是只能在4.X环境下使用,对于日益繁荣的.net core生态,花费了些时间把原有的类库重新封装为.net core ...

  5. 阿里云消息队列的C#使用http接口发送消息实例

    app.config <appSettings> <clear/> <add key="Ons_Topic" value="XXX_Fini ...

  6. 关于创建String对象过程的内存分配

    String是引用数据类型 但是String实际上java给我们提供的是一个类 注意:String 全类被fianl所修饰 所以 String 又叫 字符串常量 String 的值 一旦定义 不可以改 ...

  7. Java8内置的函数式接口

    JDK 1.8 API 包含了很多内置的函数式接口.其中就包括我们在老版本中经常见到的 Comparator 和 Runnable,Java 8 为他们都添加了 @FunctionalInterfac ...

  8. linux 安装 kafka&zookeeper

    安装kafka 1,下载kafka. #cd /usr/local #wget wget https://mirrors.tuna.tsinghua.edu.cn/apache/kafka/2.1.1 ...

  9. Docker容器的基本了解和命令

    一.docker和虚拟机的对比 特性 容器 虚拟机 启动 秒级 分钟级 硬盘使用 一般为MB 一般为GB 性能 接近原生 弱于 系统支持量 单机支持上千个容器 一般几十个 更高效的利用系统资源 更快速 ...

  10. Eclipse安装TestNG插件

    TestNG按照其文档的定义是: TestNG是一个测试框架,其灵感来自JUnit和NUnit的,但引入了一些新的功能,使其功能更强大,使用更方便. TestNG是一个开源自动化测试框架;TestNG ...