版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yyx3214/article/details/82829128
近期刚接触的angularjs,跟angular4有点差距,下面给大家分享一下小编刚学的简单查询。
查询出来的数据大概就是这样一个显示方式,查询也就是简单的input输入框
此时第一步需要在service中获取数据:
getidnum: function (idnum) {
var deferred = $q.defer();
var url = 'http://localhost:3000/Wages/QueryWagesByIdnum';
$http({
method: 'POST',
url: url,
data: {idnum: idnum}
}).success(function (data, status, headers, config) {
// console.log('getProvince===='+JSON.stringify(data));
deferred.resolve(data);
}).error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
}
第二步:路由router,写入参数params
.state('dashboard.wages',{
templateUrl:'views/wages.html',
url:'/wages'
})
.state('dashboard.wageslist',{
templateUrl:'views/wageslist.html',
url:'/wageslist',
params:{data:null}
})
第三步:点击函数search,传递参数
$scope.search=function () {
$state.go('dashboard.wageslist',{data:$scope.idnum});
};
在表格数据显示页面做以下操作,其中getidnum就是写好的数据接口
$scope.idnum = $stateParams.data;
$scope.loadData = function () {
wages.getidnum($scope.idnum).then(function (data) {
$scope.wagelist= data;
});
};
$scope.loadData();
这样,就已经根据传递的参数,来获取到显示在表格中的数据。
现在写起来还觉得挺简单的,不管是前端还是后端基本上所要处理的数据都差不多一样~~~
还有一种组合的多个条件来查找数据的,其实类似的写法,只不过是需要传递多个参数
getname: function (name,type,time) {
var deferred = $q.defer();
var url = 'http://localhost:3000/Budget/QueryBudgetByName';
$http({
method: 'POST',
url: url,
data: {name: name,
type:type,
time:time
}
}).success(function (data, status, headers, config) {
// console.log('getProvince===='+JSON.stringify(data));
deferred.resolve(data);
}).error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
}
router
.state('dashboard.budgetlist',{
templateUrl:'views/budgetlist.html',
url:'/yusuanlist',
params:{name:null,
type:null,
time:null
}
search函数,传递三个参数
$scope.search=function () {
$state.go('dashboard.budgetlist',{name:$scope.name,type:$scope.type,time:$scope.time});
};
表格显示页面,budgetslist为前端ng-repeat的数组,我这里从数据库中得到的数据格式为YYYYMM,但h5中所提供的input type数据格式为date:YYYY-MM,所以使用到了js中的replace方法。
$scope.name=$stateParams.name;
$scope.type=$stateParams.type;
$scope.time=$stateParams.time;
$scope.loadData = function () {
if (!$socpe.name || !$scope.type|| !$scope.time) return;
var time = $scope.time.replace('-','');
budget.getname($scope.name, $scope.type,time).then(function (data) {
$scope.budgetslist = data;
});
};
$scope.loadData();
前台输出{{}}绑定输入即可。