之前都是在做微信小程序的页面,最近做一些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. 深度原理与框架-图像超分辨重构-tensorlayer

    图像超分辨重构的原理,输入一张像素点少,像素较低的图像, 输出一张像素点多,像素较高的图像 而在作者的文章中,作者使用downsample_up, 使用imresize(img, []) 将图像的像素 ...

  2. js:上传图片并预览(https://blog.csdn.net/weixin_38023551/article/details/78318532)

    1: //filereader 的方法<form action="" enctype="multipart/form-data"> <inpu ...

  3. java中的数据导出到Excel表中

    整个项目中导出数据到.Excel的源码 import java.io.BufferedOutputStream; import java.io.FileInputStream; import java ...

  4. 文件下载Controller,文件夹内容监听,文件上传,运行程序通过url实现文件下载

    文件下载Controller @RequestMapping("/fileDownLoad") public ResponseEntity<byte[]> fileDo ...

  5. Ganglia监控扩展实现机制

    Ganglia监控扩展实现机制 默认安装完成的Ganglia仅向我们提供基础的系统监控信息,通过Ganglia插件可以实现两种扩展Ganglia监控功能的方法.1.添加带内(in-band)插件,主要 ...

  6. CodeForces-4C Registration system

    // Registration system.cpp : 此文件包含 "main" 函数.程序执行将在此处开始并结束. // #include <iostream> # ...

  7. 第六周博客作业 <西北师范大学| 周安伟>

    第六周博客作业 助教博客链接:https://home.cnblogs.com/u/zaw-315/ 本周工作:评阅作业24份点评困难的作业:无作业要求:https://www.cnblogs.com ...

  8. go语言环境安装

    Go 是一个开源的编程语言,被设计成一门应用于搭载 Web 服务器,存储集群或类似用途的巨型中央服务器的系统编程语言. 1. 准备环境并安装依赖包 创建centos 7.6 64bit的虚拟机. 安装 ...

  9. Educational Codeforces Round 43 (Rated for Div. 2)

    Educational Codeforces Round 43 (Rated for Div. 2) https://codeforces.com/contest/976 A #include< ...

  10. 算法练习LeetCode初级算法之设计问题

    打乱数组 不断的让第一个与后面随机选择的数交换 class Solution { private int[] nums; private int[] initnums; public Solution ...