Angular中 判断ng-repeat 是否渲染结束与checkbox翻页的状态保存

最新推荐文章于 2020-05-21 02:43:05 发布
VIP文章 最新推荐文章于 2020-05-21 02:43:05 发布
阅读量891 收藏
点赞数
分类专栏： angular 文章标签： angualr渲染结束 checkbox保存状态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41936163/article/details/80429364
版权

在项目中有一个弹出框里面是数据列表，需要用户在多个翻页中选择（一条或多条都可以）。点击确认后，把选择的数据带回后面的页面显示。

实现该功能，存在的问题：在翻页后保存checkbox的状态。

思路： 不知道什么原因，在第一页选择后 第二页的同一个位置的checkbox也会有checked状态。希望能在翻页后页面渲染完成时把 checkbox的状态重置，再去根据点击翻页时保存的被选条。去动态判断checked 的状态。

首先，实现 “ 翻页后页面渲染完成时“ ，利用angular指令监听ng-repeat渲染完成后执行脚本。

第一步自定义指令


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  西虹市昕酱
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍

				
			

			

				

					12-28
				

			

		

		

			
				
ng-repeat-start与ng-repeat-end时AngularJS（1.2.x）扩展的，使用这两个指令可以灵活控制遍历形式。 例如： index.html  <div class=uk-panel ng-controller=UserCtrl>  <ul class=uk-list>  <li ng-repeat-start=...

			
		

	



                

              
                



	

		

			

				
					
angularjs中判断ng-repeat是否迭代完

				
			

			

				

					liangyiyiliang的专栏
				

				

					02-22
					
					6265
					
				

			

		

		

			
				
angular中的ng-repeat指令会自动迭代数组然后你就可以将这些迭代的数据在页面逐条显示。但是怎样才知道数据迭代完了，其实还是有方法的，今天就介绍一种方法来判断ng-repeat是否已经迭代完。众所周知ng-repeat会为每一个repeat的对象创建一个控制器，我们就利用这个来判断。


首先我们要定义一个数组

$scope.testArrray = [
    {id: 1

			
		

	



                


  
              

                


	

		

			

				
					
angularjs ng-repeat checkbox

				
			

			

				

					weixin_30385925的博客
				

				

					09-29
					
					179
					
				

			

		

		

			
				
<div class="col-md-3" ng-repeat="user in title.UserList">       <p class="form-control-static">             <input type="checkbox" ng-checked="user.Role" ng-model="item.UserId[user.User...

			
		

	





	

		

			

				
					
angularjs执行ng-repeat判断完成状态，生成可复用性自定义指令

				
			

			

				

					我要上天一起吗？的博客
				

				

					05-21
					
					445
					
				

			

		

		

			
				
先上代码
html
//调用监听事件afterRightEditRepeat，注意不要写成afterRightEditRepeat()调用形式
<div ng-repeat="x in menu" on-finish-render="afterRightEditRepeat">
....
</div>

js自定义指令部分
//onFinishRender对应属性on-finish-render
app.directive('onFinishRender', ['$timeout',

			
		

	



		

			
		



	

		

			

				
					
angular 监听ng-repeat结束时间

				
			

			

				

					weixin_30886233的博客
				

				

					08-11
					
					104
					
				

			

		

		

			
				
有些时候我们想要监听angular js中的 ng-repeat结束事件，从而好初始化一些我们的第三方或者其他需要初始化的js。
我们可以这样处理：
js 中这样定义 ：
//监听事件 是否加载完毕app.directive('watchLoadingPicsOver', function ($timeout) {	return {		restrict: 'A',		link: funct...

			
		

	





	

		

			

				
					
复选框保存上一页信息，

				
			

			

				

					jieyigeweixiao的博客
				

				

					01-29
					
					242
					
				

			

		

		

			
				
KaTeX parse error: Expected '}', got 'EOF' at end of input: …            if((this).is(":checked")){
$(’.table1 input[name=chk]’).each(function () {
(this).prop(&amp;quot;checked&amp;quot;,true);wayIds...

			
		

	





	

		

			

				
					
理解AngularJS生命周期：利用ng-repeat动态解析自定义directive

				
			

			

				

					weixin_33953249的博客
				

				

					12-26
					
					181
					
				

			

		

		

			
				
ng-repeat是AngularJS中一个非常重要和有意思的directive，常见的用法之一是将某种自定义directive和ng-repeat一起使用，循环地来渲染开发者所需要的组件。比如现在有一个form-text指令，用于快速构建起带自定义数据验证的表单文本框，我们可以用类似下面的代码方便地建立起一个简单的表单：
controller中：

$scope.form = {};
$...

			
		

	





	

		

			

				
					
Angular中ng-repeat与ul li的多层嵌套重复问题

				
			

			

				

					12-29
				

			

		

		

			
				
学习ng-repeat的过程中常常使用到ng-repeat=”item in array”来循环输出所需要的元素，但是当我们需要使用ng-repeat进行多层嵌套时则容易出现数据重复的问题。 如在加载与点击事件于js中进行两次http请求获取data...

			
		

	





	

		

			

				
					
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍

				
			

			

				

					01-19
				

			

		

		

			
				
$index会随着每次遍历（从0开始）递增，当遍历到最后一个时，$last的值为true，so，通过判断$last的值来监听ng-repeat的执行状态，怎么在遍历过程中拿到$last的值：自定义指令 小实例，我只写了最重要的部分  /

			
		

	





	

		

			

				
					
AngularJS实践之使用ng-repeat中$index的注意点

				
			

			

				

					01-21
				

			

		

		

			
				
后来发现这个Bug是由于在 ng-repeat 中使用了 $index 引发的。 一个简单动作(action)的列表 先来看看一个完整有效的ng-repeat示例。  <ul ng-controller=ListCtrl>  <li ng-repeat=item>  {{item.name}}  <button...

			
		

	





	

		

			

				
					
angularjs中判断ng-repeat是否迭代完的实例

				
			

			

				

					12-12
				

			

		

		

			
				
angular中的ng-repeat指令会自动迭代数组然后你就可以将这些迭代的数据在页面逐条显示。但是怎样才知道数据迭代完了，其实还是有方法的，今天就介绍一种方法来判断ng-repeat是否已经迭代完。众所周知ng-repeat会为每...

			
		

	





	

		

			

				
					
AngularJS中ng-repeat渲染完成事件和中间变量的引用

				
			

			

				

					巴黎的妖
				

				

					09-18
					
					3000
					
				

			

		

		

			
				
ng-repeat渲染完成事件

因为在用AngularJS期间, 经常用到ng-repeat, 而有时需要在其渲染完成时操作已经渲染的对象, 所以特在此记录一下添加渲染事件的方法, 以方便以后的使用;
代码如下
myApp.directive('onRepeatFinishedRender', function ($timeout) {
  return {
    restrict: 

			
		

	





	

		

			

				
					
node-v4.8.6-win-x64.zip

				
			

			

				

					05-07
				

			

		

		

			
				
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。

Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。

Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。

在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。


			
		

	





	

		

			

				
					
基础运维技能（下）md格式笔记

				
			

			

				

					05-07
				

			

		

		

			
				
基础运维技能（下）md格式笔记

			
		

	





	

		

			

				
					
node-v8.1.2-linux-armv7l.tar.xz

				
			

			

				

					05-07
				

			

		

		

			
				
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。

Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。

Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。

在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。


			
		

	





	

		

			

				
					
黑马程序员 C语言学习笔记

				
			

			

				

					05-07
				

			

		

		

			
				
持续更新


			
		

	





	

		

			

				
					
PCL-1.14.1-AllInOne-msvc2022-win64+pdb-msvc2022-win64

				
			

			

				

					05-07
				

			

		

		

			
				
PCL-1.14.1-AllInOne-msvc2022-win64+pdb-msvc2022-win64

			
		

	





	

		

			

				
					
DSmall商城系统源代码

					
最新发布

				
			

			

				

					05-07
				

			

		

		

			
				
PC商城系统源码

			
		

	





	

		

			

				
					
angular中ng-template

				
			

			

				

					07-27
				

			

		

		

			
				
在Angular中，ng-template是一个内置的指令，用于定义可重用的模板片段。它通常与其他指令（如ngIf、ngFor等）一起使用，以提供更灵活的模板控制。  ng-template可以在组件的模板中定义，并且可以在同一个组件中被多...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值