Recently, angularjs just contacted has a little gap with angular4. Let's share the simple query of the editor.

The query data is probably such a display mode, and the query is also a simple input input input box

In this case, the first step is to obtain data in 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;
        }

Step 2: route router, write parameter params

    .state('dashboard.wages',{
        templateUrl:'views/wages.html',
        url:'/wages'
    })
    .state('dashboard.wageslist',{
        templateUrl:'views/wageslist.html',
        url:'/wageslist',
        params:{data:null}
    })

Step 3: click search to transfer the parameters

 $scope.search=function () {
        $state.go('dashboard.wageslist',{data:$scope.idnum});
    };

Do the following operations on the table data display page, where getidnum is the written data interface

 $scope.idnum = $stateParams.data;
    $scope.loadData = function () {
        wages.getidnum($scope.idnum).then(function (data) {
            $scope.wagelist= data;
        });
    };
    $scope.loadData();

In this way, the data displayed in the table has been obtained according to the passed parameters.
Now I think it's quite simple to write. The data to be processed is basically the same whether it's the front end or the back end~~~

There is also a combination of multiple conditions to find data. In fact, similar writing methods only need to pass multiple parameters

 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 Function, passing three parameters
 $scope.search=function () {
        $state.go('dashboard.budgetlist',{name:$scope.name,type:$scope.type,time:$scope.time});
    };

Table display page, budgetslist is an array of front-end ng repeat. The data format I get from the database here is YYYYMM, but the input type data format provided in h5 is date: YYYY-MM, so I used the replace method in js.

    $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();

The foreground output {}} can be bound to the input.