angular框架的SmartAdmin模板 如何请求后台数据
来源:互联网 发布:淘宝怎么修改一口价 编辑:程序博客网 时间:2024/05/22 06:27
公司新项目用angular 并且要求在smartadmin里写, 以前没用过,记一下。
1.在自己的模块里创建控制器controllers.js文件
文件里代码如下:
angular.module('app.Inspection').controller("inspection", function ($scope, Inspectionhttp ) {//Inspectionhttp是第二步里自己定义的名称,一定要传 $scope.param = {//返回给后台的数据 one: 1, two: 10, she: "", }; $scope.loadData = function(pageNum) { console.log(pageNum); var param = {}; angular.forEach($scope.param,function(item,val){//简单过滤空数据的函数 if(item.toString()){ param[val] = item; } }) param.pageNum = pageNum || param.pageNum; Inspectionhttp.getPurchaseData(param).then(function(res) {//调用Inspectionhttp里的方法,这个前面的名字一定记得根据自己写的名字改 $scope.pageInfo = res //调取数据成功把数据赋给$scope.pageInfo }, function(err) { console.log('load');//失败在控制台打印load }) } $scope.loadData(); });
第2步。创建service.js文件 代码如下:
"use strict";angular.module('app.integratedQuery').service("CurrentQhttp" //"currentQhtttp"是你定义的接口的名称, function($http, $q, APP_CONFIG) { this.getPurchaseData = function(params) { var d = $q.defer(); $http({ method : 'POST', url : APP_CONFIG.baseUrl + '/storage/getTGStorages', params : params, }).then(function successCallback(response) { // 请求成功执行代码 d.resolve(response.data); }, function errorCallback(response) { // 请求失败执行代码 d.reject("error"); }); return d.promise; }})
第3步。 HTML部分,因为我们公司这个项目大部分是表格,所以举个跟表格相关的例子:将获取到的后台数据渲染到table里
<table> <thead> <tr> <th>序号</th> <th data-class="expand">姓名</th> <th>性别</th> </tr> </thead> <tbody> // pageInfo.list是第一步里存数据的 <tr ng-repeat='item in pageInfo.list track by $index'> <td>{{$index}}</td> <td>{{itemName}}</td> <td>{{item.sex}}</td> </tr> </tbody> </table>
阅读全文
0 0
- angular框架的SmartAdmin模板 如何请求后台数据
- smartadmin官网_smartadmin下载 bootstrap 后台模板 下载-很不错的后台模板
- angular数据绑定 {{}} 与后台模板语言冲突
- 后台简单的框架模板
- Angular----$http请求数据
- angular-请求数据
- 运用bootstrap框架写的后台模板
- 如何让程序员更容易的开发Web界面?重构SmartAdmin展示TinyUI
- 如何让程序员更容易的开发Web界面?重构SmartAdmin展示TinyUI
- Angular-$http请求后台php接收方法
- angular用$http请求数据
- angular跨域的ajax--json数据请求
- Java 根据模板导出Excel时,如何根据后台数据设置复选框的勾选
- Ajax请求后台数据
- vue 请求后台数据
- ajax 请求后台数据
- angular的post请求,SpringMVC后台接收不到参数值的解决方案
- angular的post请求,SpringMVC后台接收不到参数值的解决方案
- Android 面试
- README
- 符合ASIL D的AUTOSAR基础软件带来的安全和性能
- 机器学习实战-之SVM核函数与案例
- 机器学习实战 决策树代码 计算香农熵 Error return arrays must be of ArrayType
- angular框架的SmartAdmin模板 如何请求后台数据
- 575. Distribute Candies
- git 常用命令
- php中 $$str 中 "$$"是什麽意思
- Mongodb数组操作$(update)、$占位符更新嵌套数组、嵌套文档集合
- myBatis逆向
- springmvc 参数绑定
- 算法刷题心得:动态规划 scramble-string
- Git-撤销(回退)已经add,commit或push的提交