Pranitha Pranitha - 1 year ago 69
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 Source

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. :)