AngularJS set html properties

Question

Мы довольно кровавые новички с JavaScript и AngularJS, но сценарии довольно просты. Мы хотим установить html-свойства, полученные из службы REST.

Это наш profileController.js:

angular 
     .module('app') 
     .controller('profileController', ['$scope', '$http', '$window', function($scope, $http) { 

     // REST service works properly 
    var resource = 'http://localhost:8080/user'; 

    $http.get(resource).then(function(result){ 

      // logs right json 
      console.log(result); 

      // no effect 
      $scope.content = result.data.toString(); 

      // no effect 
      if(!$scope.$$phase) { 
       $scope.$apply(); 
      } 
     }); 

} ]); 

profile.html

<div> 
    <div class="container"> 
     <br><br><br> 
     <h2 class="sub-header">Profile</h2> 
     <div class="table-responsive"> 
      <table class="table table-striped"> 
       <thead> 
       <tr> 
        <th>#</th> 
        <th>Forename</th> 
        <th>Name</th> 
        <th>Role</th> 
        <th>E-Mail</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr> 
        <td>{{profile.data}}</td> 
        <!-- Doesn't work as well 
        <td>{{profile.forename}}</td> 
        <td>{{profile.lastname}}</td> 
        <td>{{profile.role}}</td> 
        <td>{{profile.email}}</td>--> 
       </tr> 
       <div id="container" ng-controller="profileController"> 
        <content-item forename="item"></content-item> 
       </div> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

остального сервис работает правильно и отправляет обратно JSON, бревенчатые выходы в консоли JavaScript прав, просто настройка в html не работает, и у нас нет абсолютно никакой подсказки.

Заранее благодарен!

Answer 1

C onsider this Plunk.

app.controller("myController", [ 
     "$scope", 
     function($scope){ 

     $scope.content = [ 
      { 
      "firstname": "Natalie", 
      "lastname": "Portman", 
      "role": "Accountancy", 
      "email": "n.p@email.com" 
      }, 
      { 
      "firstname": "Johnny", 
      "lastname": "Depp", 
      "role": "Sales Management", 
      "email": "j.d@email.com" 
      }, 
      { 
      "firstname": "Kevin", 
      "lastname": "Costner", 
      "role": "Crisis control", 
      "email": "k.c@email.com" 
      }, 
     ]; 
     }]); 

Если выше $scope.content является жёстко моделирование вашего $scope.content = result.data;.

И использование:

<tr ng-repeat="profile in content"> 
    <td>#</td> 
    <td>{{profile.firstname}}</td> 
    <td>{{profile.lastname}}</td> 
    <td>{{profile.role}}</td> 
    <td>{{profile.email}}</td> 
</tr> 

Проверьте Plunk для полного кода.

PS: Я заменил {{profile.data}} на # для примера, поскольку я не знаю, что это должно быть.

Answer 2

конвертировать

$scope.content = result.data.toString(); 

к этому:

$scope.content = result.data; 

И если вы хотите, чтобы распечатать данные внутри

<td>{{profile.data}}</td> 

вы должны изменить положение контроллера в теге HTML ..

Answer 3

Попробуйте это Проверьте ваш ng-контроллер и ng-приложение тоже, это step в the angular tutoria l должно быть хорошо для этого.

Здесь, в вашем коде, нг-контроллер должен быть по крайней мере, в таблице тега

т.е.

<div> 
<div class="container"> 
    <br><br><br> 
    <h2 class="sub-header">Profile</h2> 
    <div class="table-responsive"> 
     <table class="table table-striped" ng-controller="profileController"> 
      <thead> 
      <tr> 
       <th>#</th> 
       <th>Forename</th> 
       <th>Name</th> 
       <th>Role</th> 
       <th>E-Mail</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td>{{content}}</td> 
       <!-- Doesn't work as well 
       <td>{{content.forename}}</td> 
       <td>{{content.lastname}}</td> 
       <td>{{content.role}}</td> 
       <td>{{content.email}}</td>--> 
      </tr> 
      <div id="container"> 
       <content-item forename="item"></content-item> 
      </div> 
      </tbody> 
     </table> 
    </div> 
</div>