angularJS实战(一)查询操作

最新推荐文章于 2024-06-19 09:48:33 发布

佐杰

最新推荐文章于 2024-06-19 09:48:33 发布

阅读量510

点赞数

分类专栏： angularJs 品优分布式电商项目

本文链接：https://blog.csdn.net/OnlyoneFrist/article/details/89283580

版权

angularJs 同时被 2 个专栏收录

11 篇文章 2 订阅

订阅专栏

品优分布式电商项目

11 篇文章 0 订阅

订阅专栏

需求如下：如何使用angularJS实现这样的查询列表？

如果不懂angularJS可以看下前几篇的angularJS入门

接下来我们进入正题在实战项目中一般目前都是前后端分离的模式。

我们先实现后端代码：

@Reference
	private BrandService brandService;
	@RequestMapping("/findAll")
	public List<TbBrand>findAll(){
		return brandService.findAll();
	}

前端实现代码

第一步肯定是显示引入angularJs的js文件

 <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>

第二步建立一个angular模型

var app=angular.module("pinyougou");

第三步在body上引入

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" >

第四步构建controller

app.controller("brandContrller",function($scope,$http){}

第五步在body中引入controller

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandContrller" >

第六步写controler的中的内容

app.controller("brandContrller",function($scope,$http){
    	//查询品牌列表
    	$scope.findAll=function(){
            //这里$http.get可以理解成ajax
    		$http.get("../brand/findAll.do").success(function(response){
    			
    				$scope.list=response;
    			
    		});
    		
    	}

第七步在列表中取值 ng-repeat这个指定相当于foreach

 <tr ng-repeat=" brand in list">
 <td><input  type="checkbox" ></td>			                              
 <td>{{brand.id}}</td>
 <td>{{brand.name}}</td>									     
 <td>{{brand.firstChar}}</td>		                                 
 <td class="text-center">                                           
 <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"  >修改</button>                                           
 </tr>

源码地址

佐杰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularJS实战(一)查询操作

需求如下：如何使用angularJS实现这样的查询列表？如果不懂angularJS可以看下前几篇的angularJS入门接下来我们进入正题在实战项目中一般目前都是前后端分离的模式。我们先实现后端代码：@Reference private BrandService brandService; @RequestMapping("/findAll") public List&...
复制链接

扫一扫

专栏目录