angularJS实战(一)查询操作

古城微笑少年丶 2022-02-20 11:16 302阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70][]

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

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

### 我们先实现后端代码： ###

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

### 前端实现代码 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70 1][]

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

第二步建立一个angular模型

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

第三步在body上引入

第四步构建controller

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

第五步在body中引入controller

第六步写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>

### [源码地址][Link 1] ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70]: /images/20220220/deb0f63ad4bf495cb6e40bdbbbf654d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09ubHlvbmVGcmlzdA_size_16_color_FFFFFF_t_70 1]: /images/20220220/afd5d0ba818a4f7781ec446935b4859c.png
[Link 1]: https://github.com/issueDriver/pinyougou