AngularJS set html properties

Question

we are pretty bloody beginners with JavaScript and AngularJS, but the scenarios is pretty simple. We want to set html properties received from a REST service.

This is our 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>

The REST service works properly and sends the json back, the log outputs in the JavaScript console are right, just the setting in html doesn't work and we have absolutely no clue.

Thanks in advance!

+1, the toString() should simply not be here, you are no longer manipulating a json object after this line. — Pierre Gayvallet
– Pierre Gayvallet, Commented Dec 2, 2015 at 13:06
It was just a demonstration that nothing works: $scope.content = result.data; $scope.forename = 'hallo'; this.lastname = 'lastname'; — Rooky
– Rooky, Commented Dec 2, 2015 at 13:17
Those tds are not descendent elements of div#container, on which ng-controller is defined. So, "not work" is just the right behavior. Try move ng-controller="profileController" to the table element. — Leo
– Leo, Commented Dec 2, 2015 at 13:29

kbd · Accepted Answer · 2015-12-02 13:36:11Z

Consider this Plunk.

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

        $scope.content = [
          {
            "firstname": "Natalie",
            "lastname": "Portman",
            "role": "Accountancy",
            "email": "[email protected]"
          },
          {
            "firstname": "Johnny",
            "lastname": "Depp",
            "role": "Sales Management",
            "email": "[email protected]"
          },
          {
            "firstname": "Kevin",
            "lastname": "Costner",
            "role": "Crisis control",
            "email": "[email protected]"
          },
        ];
      }]);

Where the above $scope.content is a hardcoded simulation of your $scope.content = result.data;.

And usage:

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

Check the Plunk for the complete code.

PS: I changed the {{profile.data}} to # for the example, as I don't know what that's supposed to be.

David · Accepted Answer · 2015-12-02 13:20:20Z

Try this Check your ng-controller and ng-app too, this step in the angular tutorial should be fine for this.

Here, in your code, the ng-controller should be at least in the table tag i.e

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

Vishant dhandha · Accepted Answer · 2015-12-02 13:16:42Z

0

convert

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

to this:

$scope.content = result.data;

And if you want to print the data inside

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

you have to change position of controller in html tag..

answered Dec 2, 2015 at 13:16

Vishant dhandha

4957 silver badges19 bronze badges

Collectives™ on Stack Overflow

AngularJS set html properties

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related