在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包。其他包都是一些无关紧要的样式啊什么的包。

<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来解析。

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值