Question

我正在使用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>

我回复后回复 -

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

但即使在设置$scope.profiles之后，我也没有在UI上看到表格。

我对角度很新，我错过了一些明显的东西。任何帮助表示赞赏。

Answer 1

问题是你是在一个范围内获取数据（你声明ng-controller =“searchController”的div内容）然后尝试查看另一个范围内的数据（ div profilesDiv，您再次声明ng-controller =“searchController”）。

要解决此问题，您需要从profilesDiv中删除ng-controller =“searchController”并在内容div中移动profilesDiv。

像这样：

 <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

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

1 个答案: