応答データがng-repeatのテーブルにバインドされていません

私はangularJSを使用しているサンプルアプリケーションで作業しています。応答データがng-repeatのテーブルにバインドされていません

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 -

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

それでも$scope.profilesを設定した後 -

@{ 
    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>

は私が応答以下戻って取得しています私はUIのテーブルを見ていない。

私は非常に角度が新しく、私は何か明白なものを紛失しています。何か助けていただければ幸いです。

出典

2017-01-10 user2769614

、その方法も文句を言わない仕事。最初の 'div'要素にテーブルコードを移動します。 –

問題は、あなたが1つのスコープ（あなたはNG-コントローラ=「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

出典

2017-01-10 07:58:32

いいえ、動作しません。 'profiles'要素をコントローラの' div'要素で動かす必要があります。 –

@AmitKumarGhoshありがとう、divコンテンツの終了タグを逃した。 –

応答データがng-repeatのテーブルにバインドされていません

答えて

関連する問題