angularJS 简单查询

近期刚接触的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();

前台输出{{}}绑定输入即可。

猜你喜欢