响应数据未使用ng-repeat绑定到表

debugcn 发表于 Dev

用户名

我正在使用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上看到表格。

我对棱角还很陌生，我是否缺少明显的东西。任何帮助表示赞赏。

马库斯·霍格隆德（MarcusHöglund）

问题是您要在一个作用域（声明ng-controller =“ searchController”的div内容）中获取数据，然后尝试在另一个作用域（divprofilesDiv中再次声明ng-controller =的视图中）查看数据。“ searchController”）。

要解决此问题，您需要从profilesDiv中删除ng-controller =“ searchController”并将profilesDiv移到内容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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。