Angular js directives error


#1
<!DOCTYPE html>
<html>
  <head>
    <title>Online Medical Report Using HyperLedger Fabric</title>

    <!-- require jquery and bootstrap scripts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    
    <!-- adding style here -->
    <style type="text/css">
      body{
        background-color: lightblue;
      }
      header, .form-group{
        margin-bottom: 3%;
      }
      .form-group{
        width:50%;
      }
      #body{
        margin-left:3%;
        margin-right:3%;
      }
      .form-control{
        margin: 8px;
      }
      #right_header{
        width:20%;
        font-size:15px;
        margin-right:0px;
      }
      #left_header{
        margin-left:0;
        width:40%;
        display:inline-block;
      } 
      #id {
        width:49%;
        display: inline-block;
      }
      table {
          font-family: Montserrat, sans-serif;
          border-collapse: collapse;
          width: 100%;
      }
      td, th {
          border: 1px solid #b0b0ce;
          text-align: left;
          padding: 8px;
      }
      tr:nth-child(even) {
          background-color: #b0b0ce;
      }
    </style>
  </head>
  <body ng-app="application" ng-controller="appController">
    <header>
      <div id="left_header">Hyperledger Fabric Application</div>
      <i id="right_header">Online Medical Record Sytem</i>
    </header>

      <div id="body">
      <div class="form-group">
        <label>Query All Reports</label>
        <p><input id="queryAllReports" type="submit" value="Query" class="btn btn-primary" ng-click="queryAllReports()"></p>
      </div>
 
      <table id="all_report" class="table" align="center">

        <tr>
          <th>ID</th>
          <th>Symptoms</th>
          <th>Doctor</th>
          <th>Prescription</th>
          <th>Patient</th>
        </tr>

        <tr ng-repeat="report in all_report">
          <td>{{report.Key}}</td>
          <td>{{report.symptoms}}</td>
          <td>{{report.doctor}}</td>
          <td>{{report.prescription}}</td>
          <td>{{report.patient}}</td>
        </tr>
      </table>

      <div class="form-group">
        <label>Query a Specific Report</label><br>
        <h5 style="color:#eaeaff;margin-bottom:2%" id="error_query">Error: Please enter a valid Id</h5>
        
        Enter a report number: <input id="createName" class="form-control" type="text" placeholder="Ex: 3" ng-model="report_id">
        <input id="querySubmit" type="submit" value="Query" class="btn btn-primary" ng-click="queryReport()">
      </div>

      <table id="query_report" class="table" align="center">

        <tr>
          <th>Symptoms</th>
          <th>Doctor</th>
          <th>Prescription</th>
          <th>Patient</th>
        </tr>

        <tr>
          <td>{{query_report.symptoms}}</td>
          <td>{{query_report.doctor}}</td>
          <td>{{query_report.prescription}}</td>
          <td>{{query_report.patient}}</td>
        </tr>
      </table>

      <div class="form-group">
        <label>Create Report</label>  
        <h5 style="color:#eaeaff;margin-bottom:2%" id="success_create">Success! Tx ID: {{create_report}}</h5>
        <br>
        Enter id: <input class="form-control" type="text" placeholder="Ex: 11" ng-model="report.id">
        Enter name of patient: <input class="form-control" type="text" placeholder="Ex: Tim" ng-model="report.patient">
        Enter symptoms: <input class="form-control" type="text" placeholder="Ex: Headache" ng-model="report.symptoms">
        Enter prescription: <input class="form-control" type="text" placeholder="Ex: Aspirin" ng-model="report.prescription">
        Enter name of doctor: <input class="form-control" type="text" placeholder="Ex: Hansel" ng-model="report.doctor">
        <input id="createSubmit" type="submit" value="Create" class="btn btn-primary" ng-click="createReport()"> 
      </div>

      <div class="form-group">
        <label>Change Doctor</label><br>
        <h5 style="color:#eaeaff;margin-bottom:2%" id="success_doctor">Success! Tx ID: {{change_doctor}}</h5>
        <h5 style="color:#eaeaff;margin-bottom:2%" id="error_doctor">Error: Please enter a valid Id</h5>
        Enter id between 1 and 10: <input class="form-control" name="assetSelect" placeholder="Ex: 1" ng-model="doctor.id">
        Enter name of new doctor: <input class="form-control" name="assetSelect" placeholder="Ex: Barry" ng-model="doctor.name">
        <input id="transferSubmit" type="submit" value="Change" class="btn btn-primary" ng-click="changeDoctor()">
      </div>

    </div>
  </body>
    <!-- requiring the angular page -->
    <script type="text/javascript" src="app.js"> </script>
</html>

The output for the above HTML code is as follows:

Can someone help me understand what I am doing wrong?


#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.