Angularjs 响应数据未绑定到具有ng repeat的表_Angularjs_Asp.net Web Api2

Angularjs 响应数据未绑定到具有ng repeat的表

angularjs

Angularjs 响应数据未绑定到具有ng repeat的表,angularjs,asp.net-web-api2,Angularjs,Asp.net Web Api2,我正在使用angularJS开发一个示例应用程序我有一个返回JSON对象的服务，我试图将响应绑定到一个表控制器- (function () { var app = angular.module('searchApp', []); app.config(function ($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist(['http://localhost:11838/Searc

我正在使用angularJS开发一个示例应用程序

我有一个返回JSON对象的服务，我试图将响应绑定到一个表

控制器-

(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>

但即使在设置了

$scope.profiles

之后，我仍然看不到UI上的表

我对棱角分明的人还不太熟悉，我是否遗漏了一些明显的东西。

非常感谢您的帮助。

问题在于您正在一个范围（声明ng controller=“searchController”的div内容）中获取数据，然后尝试在另一个作用域（div profilesDiv）中查看数据，在此再次声明ng controller=“searchController”）

要解决此问题，需要从profilesDiv中删除ng controller=“searchController”，并将profilesDiv移动到content div中

像这样：

 <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


配置文件名称：


规则集名称：


搜索
清楚的
{{x.ProfileName}
{x.CreationDate}
你使用同一个控制器两次，这样它就不工作了。移动第一个div
元素中的表代码。否，它将不起作用。您需要在controllerdiv
元素中用移动profilesDiv。@AmitKumarGhosh谢谢，缺少div内容的结束标记。
 <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