CODEWITHSUNDEEP
angularjsasp.net-web-api2
user2769614
user2769614

Reputation: 247

Response Data is not binding to table with ng-repeat

I am working on a sample app using angularJS.

I have a service which returns JSON object, I am trying to bind the response to a table.

Controller - 

(function () {
    var app = angular.module('searchApp', []);
    app.config(function ($sceDelegateProvider) {
        $sceDelegateProvider.resourceUrlWhitelist(['http://localhost:11838/SearchProfiles/get']);
    });
    var controller = app.controller('searchController', ["$scope", "$http", function ($scope, $http) {
        $scope.profileName = "";
        $http.get("http://localhost:11838/SearchProfiles/GetAllRuleSets")
            .then(function (response) {
                $scope.ruleSets = response.data;
        });
        $scope.searchProfiles = function () {
            $http.get("http://localhost:11838/SearchProfiles/GetProfiles?profileName=" + $scope.profileName
                + "&ruleSetName=" + $scope.selectedRuleSet)
            .then(function (response) {
                $scope.showProfiles = true;
                $scope.profiles = response.data;
                console.log($scope.profiles);
            });
        };
        $scope.clearForm = function () {
            $scope.profileName = "";
            $scope.selectedRuleSet = "";
        };
    }]);
})();

cshtml - 

@{
    ViewBag.Title = "Search Profiles";
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Search Profiles</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    @Scripts.Render("~/Scripts/angular")
    @Styles.Render("~/Content/css/scss")
</head>
<body ng-app="searchApp">
    <div ng-controller="searchController" id="content">
        <label>Profile Name: </label>
        <input type="text" name="profileName" ng-model="profileName" /><br />
        <label>RuleSet Name: </label>
        <select ng-model="selectedRuleSet" ng-options="x for x in ruleSets"></select><br />
        <button name="search" ng-click="searchProfiles()">Search</button>
        <button name="clear" ng-click="clearForm()">Clear</button>
    </div>
    <div ng-controller="searchController" id="profilesDiv">
        <table>
            <tr ng-repeat="x in profiles">
                <td>{{ x.ProfileName }}</td>
                <td>{{ x.CreationDate }}</td>
            </tr>
        </table>
    </div>
</body>

I am getting back following response - 

[{"ProfileName":"Profile3","CreationDate":"1/9/2017"},{"ProfileName":"Profile4","CreationDate":"12/30/2016"}]

but even after setting $scope.profiles I am not seeing table on UI.

I'm fairly new to angular, am I missing something obvious. Any help is appreciated.

Upvotes: 0

Views: 957

Answers (1)

Marcus H&#246;glund
Marcus H&#246;glund

Reputation: 16856

The problem is that you are fetching the data in one scope (the div content where you declare ng-controller="searchController") and then trying to view the data in another scope (the div profilesDiv where you again declare the ng-controller="searchController").

To solve the problem you need to remove ng-controller="searchController" from the profilesDiv and move the profilesDiv inside the content div.

Like this:

 <body ng-app="searchApp">
        <div ng-controller="searchController" id="content">
            <label>Profile Name: </label>
            <input type="text" name="profileName" ng-model="profileName" /><br />
            <label>RuleSet Name: </label>
            <select ng-model="selectedRuleSet" ng-options="x for x in ruleSets"></select><br />
            <button name="search" ng-click="searchProfiles()">Search</button>
            <button name="clear" ng-click="clearForm()">Clear</button>
          <div id="profilesDiv">
            <table>
                <tr ng-repeat="x in profiles">
                    <td>{{ x.ProfileName }}</td>
                    <td>{{ x.CreationDate }}</td>
                </tr>
            </table>
        </div>
        </div>

    </body

Upvotes: 1

Related Questions