Pranitha Pranitha - 6 months ago 15
AngularJS Question

Ng-view with Controllers

I'm new to AngularJS and I am trying to concat the date given as input and the URL to get the JSON data from it. For ex; I have URL: http://url/date=2015-08-22, So this data from URL will give different values for different dates. Now, I want to display the data based on date selected and to display it in a single page(without refreshing page). Also I want to display data from this URL in a table.

Here is what I have as of right now:

<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js'></script>
<script>
var app = angular.module('app', []);
app.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/date', {
templateUrl: 'table.html',
controller: 'MainCtrl'
})
}]);
app.controller('MainCtrl', function ($scope, $http) {
$scope.info = {
sel: " "
};
$http.get("http://192.168.2.1/info/posts?seldate=" + $scope.info.sel)
.success(function (response) {
$scope.condition = response.Table1
});
});
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<div>
Date: <input type="text" ng-model="info.sel">
</div>
<div>
<a href="#/date"><input type="button" value="Submit" /></a>
</div>
<div ng-view>
</div>
</div>
</body>
</html>


Here Table1 is from URL and it has JSON data. Below is table.html, which I have used in code above:

<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Designation</th>
<th>Qualification</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in condition">
<td>{{x.ID}}</td>
<td>{{x.Name}}</td>
<td>{{x.Designation}}</td>
<td>{{x.Qualification}}</td>
</tr>
</tbody>
</table>


Now, the problem is when I enter the date and click on submit, I could only see the table headers and no content in it. I also made sure that there is no problem with URL and is working perfectly. Please provide solution for this. I really need this. Thanks in advance!!

Answer

It is always better to use latest version of angularJS for your work.

So, we can change your script link to the following.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>

Here you can see that, we replace your angularJS v1.1 with two files called angular.min.js and angular-route.js. It is because, currently angular split angular library into different files.

Next change in your code is to inject ngRoute into your module. It is because of now, we use a new module for routing.

var app1 = angular.module('app', ['ngRoute']);

Your controller should look like :

app1.controller('MainCtrl', function ($scope, $http, $location) {
        $scope.info = {
            sel: " "
        };

        $scope.subt_click = function () {
            $http.get("http://192.168.2.1/info/posts?seldate=" + $scope.info.sel)
                .then(function success(response) {
                    // Your success callback
                    $scope.condition = response.Table1
                },
                    function error() {
                        // Error callback
                    }
                );
            // populate your ng-view with table
            $location.path('/date');
        };

    });

We need to call function $scope.subt_click when user click on the submit button. We can use ng-click directive to achieve this,

<input type="button" value="Submit" ng-click="subt_click()" />

So, your entire page would look like this,

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.js"></script>
    <script>
        var app1 = angular.module('app', ['ngRoute']);
        app1.config(['$routeProvider', function ($routeProvider) {
            $routeProvider
            .when('/date', {
                templateUrl: 'table.html',
                controller: 'MainCtrl'
            })
            .otherwise(
                {
                    template : '<h1> Home </h1>'
                }
            )
        }]);
        app1.controller('MainCtrl', function ($scope, $http, $location) {
            $scope.info = {
                sel: " "
            };

            $scope.subt_click = function () {
                $http.get("http://192.168.2.1/info/posts?seldate=" + $scope.info.sel)
                    .then(function success(response) {
                        // Your success callback
                        $scope.condition = response.Table1
                    },
                        function error() {
                            // Error callback
                        }
                    );
                // populate your ng-view with table
                $location.path('/date');
            };

        });
    </script>
</head>
<body>
    <div ng-controller="MainCtrl">
        <div>
            Date: <input type="text" ng-model="info.sel">
        </div>
        <div>
            <input type="button" value="Submit" ng-click="subt_click()" />
        </div>
        <div ng-view>
        </div>
    </div>
</body>
</html>

That's all !!!

I didn't test this code. If you got any issue please feel free to ask.

Thanks. :)

Comments