CODEWITHSUNDEEP
javascripthtmlangularjs
Karson074
Karson074

Reputation: 127

data-ng-repeat is not listing the contents of an array

I am currently trying to create a search page using Angular JS. Right now I am trying to test the code for the table that will contain the results I have created a test list that will be grabbed and placed in the table. The problem is that my code does not seem to work. Every time I try to run the code the table only has the headers and a row that contains {{element}}. Below is the code I am using. I currently have two controllers, one for the form that collects the search data and the other to control the contents of the table that will contain the search results.

HTML Code:

    <!DOCTYPE html>
    <html data-ng-app="agentOnlineApp">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
    <script type="text/javascript" src="jscripts/agentSearch.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    <!-- <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script> -->

    <script type="text/ng-template"></script>
    </head>
    <body>

    <section id="agentSearchInput" class="primarySection">
        <h3>Agent Search</h3>
        <br>
        <form id="agentSearch" data-ng-controller="agentSearchCtrl">
            Agent Number: <input Type="text" name="agentNumber" pattern="\w{1}&\d{3}|\d{4}" autofocus data-ng-model="agent.agentNumber"><br>
            <br>
            -- Or --
            <br>
            <br>
            Agent Name: <input Type="text" name="agentName" placeholder="John Doe" size="25" data-ng-model="agent.agentName" >
            Type: <input list="type" data-ng-model="agent.agentType">
                    <datalist id="type">
                        <option value="TRAC" >
                    </datalist>
            State: <input list="state" data-ng-model="agent.agentState">
                    <datalist id="state">
                        <option value="State" >
                    </datalist>
            District: <input list="district" data-ng-model="agent.agentDistrict">
                        <datalist id="district">
                            <option value="1" >
                        </datalist><br>
            <br>
            <br>
            <button type="button" class="btn btn-primary" data-ng-click="agentSearch()" name="AgentSearch">Search</button>
        </form>
     </section>

     <section id="agentSearchOutput" >
        <table id="agentTable" class="agentTable" data-ng-controller="agentSearchListCtrl" >
            <thead>
                <tr>
                    <th>Agent Number</th>
                    <th>Agent Name</th>
                    <th>Agent Type</th>
                    <th>State</th>
                    <th>District</th>
                </tr>
            </thead>
            <tbody id="AgentTableBody">
                <tr data-ng-repeat="agent in agentSearchResults">
                    <td><a href="'  {{agent.agentNumber}}  '">{{agent.agentNumber}}</a></td>
                    <td>{{agent.agentName}}</td>
                    <td>{{agent.type}}</td>
                    <td>{{agent.state}}</td>
                    <td>{{agent.district}}</td>
                </tr>
            </tbody>
        </table>
     </section>
     </body>
     </html>

JS Code:

var agentOnlineApp = angular.module('agentOnlineApp', []);

    //this controller is for the agent search form and search button
    agentOnlineApp.controller('agentSearchCtrl', function($scope)
    {
        //$scope.tableHide = true;
        //$scope.toggle = function(){
        //  $scope.tableHide = !$scope.tableHide;
        //}
    });

    //this controller controls the contents of the AgentSearchTable
    agentOnlineApp.controller('agentSearchListCtrl', function($scope)
    {
        $scope.agentSearchResults = [{agentNumber: "1234", agentName: "Doe, John", type:"TRAC", state: "MO", district: "03"},
                        {agentNumber: "4567", agentName: "Doe, Jane", type:"TRAC", state: "IL", district: "01"},
                        {agentNumber: "4789", agentName: "Nobody, Mark", type:"TRAC", state: "KS", district: "02"}
                        ];

    });

Upvotes: 0

Views: 129

Answers (1)

alex
alex

Reputation: 7471

The OP fixed their problem by removing "type=text/javascript" from the agentSearch.JS call.

Upvotes: 1

Related Questions