在jsp页面从ssm框架的controller使用angularjs接收数据并使用ng-repeat显示的步骤

折腾了好久，不过解决了以后还是觉得挺简单的，哎，怪自己太菜了

首先想展示的效果是这样的，使用foreach这些方法是可以实现的但是我不一样，我记得以前用angularjs做项目的时候，有一个特别棒的功能，如下：

http://www.runoob.com/try/try.php?filename=try_ng_filters_input

他就是可以直接在输入框过滤关键字来实现查询的功能。我们以前做的是node.js加angularjs，这个前端augularjs可以说是重头戏，功能很强大，用的特别爽，但是现在上班了，公司用的是ssm框架，这对我这个菜鸟来说都挺难得了，我现在用ssm做了简单的增删改查的功能，但是我想独特一点，所以打算加上angularjs的输入过滤的强大功能。现在终于搞出来了。来看吧。下面是一个显示效果。

前端代码，当然你得导入angular.min.js包。其他包都是一些无关紧要的样式啊什么的包。

    

		

			

				
ID
				
名户名
				
密码
									
			
		
		

             

			   
{{x.id}}
			   
{{x.name}}
			   
{{x.password}}
												
			 
        
      
																						
 
	
								
												                           
                             

在script里写如下

以上这些在一个页面写就可以了，我们以前做的先要从前端获取数据然后到路由再到controller.js然后再到service再到后台controller再到dao等等相当复杂的过程，但是写一个功能你就会发现，我的天，真的很棒。这个的话后台的ssm弄好了把angularjs相关的都写页面上就行了，如果以后多了，你可以专门搞一个js文件来放写好的功能，也是可以的呢。

angularjs主要处理json格式的数据我用map.put传到前端的数据repeat给我遍历不了，哎，

map.put("user",user);

从console中看到我的数据就是这样的

而angularjs需要这样的

    [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];

那行吧那就转换格式吧，我在jsp页面搞了半天也没弄出来的所以然，于是，我就在controller中把用户的list列表先转换成json然后在传到前端j就ok了，看到数据的一刹那整个人都被我的智慧震惊了，周围都很安静，我心里波澜起伏不定，对自己说了你真棒你真棒，嘿嘿。下面是controller中的代码

@RequestMapping("/customer/link2")
	public String link2(Map map){
		List user=userService.getAllUser();
		 JSONArray json = new JSONArray();
         for(User pLog : user){
             JSONObject jo = new JSONObject();
             jo.put("id", pLog.getId());
             jo.put("name", pLog.getName());
             jo.put("password", pLog.getPassword());              
             json.put(jo);
         }
		//map.put("user",user);	
		map.put("angularUser",json);
		return "link2";
	}

我加断点的时候看到以下图片的时候就已经有点开心了，不过还是担心着传到angularjs会不会给我出什么岔子，结果哈哈，开心，等我把输入过滤器做好了在完成后续内容，不过这个都出来了，输入过滤还不得跟玩一样啦哈哈！！！！

下面是转换格式我参考的资料

https://www.cnblogs.com/K-artorias/p/6843147.html 这个简单明了。我直接就用了里面的第一个方法。

https://www.cnblogs.com/joahyau/p/6736637.html  这个比较详细，但是在我这没啥用，记录一下

果然两分钟就做好了，如下，输入框有点丑，回头再美化一下，

输入一个k

什么都不用点，直接就能查到你想要的，很方便吧，就是在页面加了一个filter，如下,在你要输入关键字的input中加入ng-model="test"当然名字随便取只要跟x in names | filter:test中的值一样就行，这个功能真的很棒呢。

 

  查询
   
		
          

			

			  

				
ID
				
名户名
				
密码
				
用户管理
									
			  
			
			

			   

				 
{{x.id}}
				 
{{x.name}}
				 
{{x.password}}
																		
			   
             
	
            
																					
	
	                           

所有的用到angularjs的地方必须要在

中，这是告诉浏览器这里得用angular来解析。