HTML variable value not passing to app.controller attributes in html tag

Question

I am working on a basic student - teacher web application where I'm building the front-end using angular JS. I have 2 app controllers in my JS file one for retrieving the students and the other retrieving the subjects allocated to each student.

I am having an issue passing the student id to the app controller as an attribute {{student.id}} as it is just being passed as the string "{{student.id}}" rather than passing actual value of {{student.id}}

Snippet of html code where issue occurs

<div ng-controller="studentController" class="container">

    <table class="table">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Subjects</th>
        </tr>
        <tr ng-repeat="student in students">
            <td id>{{student.id}}</td>
            <td>{{student.Name}}</td>
            <td ng-controller="subjectController"
                id = {{student.id}}>
             {{subjects}}
            </td>
        </tr>
    </table>

The issue I am having is at this line

<td ng-controller="subjectController" id = {{student.id}}> {{subjects}}</td>

Running the same line of code like this seems works as expected but I want to be able to iterate over all student ID's in the for loop

<td ng-controller="subjectController" id = 1> {{subjects}}</td>

Does anyone have any suggestions on how I can overcome this issue. I looked extensively online but couldn't find a solution as the majority of tutorials and documentation focus on taking in user input through ng-model.

I am fairly new to programming so any help would be highly appreciated.

UPDATE

app.controller('studentController', function($scope, $location, $http) {
    $http.get('http://localhost:8080/getStudents')
    .then(function(response) {
        $scope.students = response.data;
    });

});

app.controller('subjectController', function($scope, $attrs, $location, $http) {
    $http.get('http://localhost:8080/getSubjects?ID='+ $attrs.id)
            .then(function(response) {
                $scope.subjects = response.data;
            });

});

It seems odd that you need an AngularJS controller for one <td> element. If you insist on doing such, please show the code for that contoller so that we can help you with it. — georgeawg
– georgeawg, Commented Oct 27, 2019 at 20:39

georgeawg · Accepted Answer · 2019-10-27 20:45:50Z

1

The subjectController should inherit properties from its parent scopes:

app.controller("subjectController", function($scope) {
    console.log($scope.student.id); 
    console.log($scope.students); //Inherited from parent scope
});

For more information, see

AngularJS Developer Guide - Scopes Hierarchies

answered Oct 27, 2019 at 20:45

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Novice Developer Over a year ago

Thanks a million! This is exactly what I was trying to achieve. My approach was completely off as I wasn't utilizing access to the parent scope in the JS file.

Collectives™ on Stack Overflow

HTML variable value not passing to app.controller attributes in html tag

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related