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

最新推荐文章于 2022-05-30 15:56:52 发布

a954735254

最新推荐文章于 2022-05-30 15:56:52 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/a954735254/article/details/81670695

版权

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

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

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

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

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

<div ng-app="myApp" ng-controller="namesCtrl">
    <table class="table table-bordered table-striped">
		<thead>
			<tr>
				<th>ID</th>
				<th>名户名</th>
				<th>密码</th>									
			</tr>
		</thead>
		<tbody>
             <tr ng-repeat="x in names ">
			   <td >{{x.id}}</td>
			   <td>{{x.name}}</td>
			   <td>{{x.password}}</td>												
			 </tr>
        </tbody>
      </table>																						
 </div>

在script里写如下

<script type="text/javascript">
	angular.module('myApp', []).controller('namesCtrl', function($scope) {
		 $scope.names = ${angularUser};
    });
</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<String,Object> map){
		List<User> 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中的值一样就行，这个功能真的很棒呢。

<div ng-app="myApp" ng-controller="namesCtrl">
 <div class="input-group">
  <span class="input-group-addon">查询</span>
   <input type="text" class="form-control" placeholder="请输入关键字" ng-model="test">
		</div>
          <table class="table table-bordered table-striped">
			<thead>
			  <tr>
				<th>ID</th>
				<th>名户名</th>
				<th>密码</th>
				<th>用户管理</th>									
			  </tr>
			</thead>
			<tbody>
			   <tr ng-repeat="x in names | filter:test ">
				 <td>{{x.id}}</td>
				 <td>{{x.name}}</td>
				 <td>{{x.password}}</td>																		
			   </tr>
             </tbody>	
            </table>																					
	</div>	                           
</div>

所有的用到angularjs的地方必须要在<div ng-app="">中，这是告诉浏览器这里得用angular来解析。