Wie DB-Daten in JSON-Datei abrufen und ein UI-Gitter mit angular js erstellen? ohne MVC zu benutzen?

Question

Ich muss eine Datenbanktabelle als Rasteransicht in HTML-Seite mit Angular JS füllen. Ich habe eine CS-Datei und Datenzugriffsschicht verwendet, um die JSON-Zeichenfolge der Tabellendaten abzurufen. Nun, wie kann ich die JSON-String in HTML-Seite verarbeiten?

Answer 1

Ich hatte eine ähnliche Anforderung, aber ich brauche eine Reihe von Feldern mit JSON-Datei zu füllen, um dies zu erreichen ich die Winkel heitlich verwendet haben, die die JSON-Datei liest und sie als Eingänge Formular UI konvertieren

können Sie lernen Winkel heitlich here

einen Dienst in Winkel js erstellen und die JSON-Daten aus der DB und dann Winkel verwenden heitlich das Gitter UI dynamisch

aufzufüllen

Dies ist mein Code, die ich Formulareingaben erstellt habe Winkel formell durch das Lesen von JSON-Datei (dieser Code ist für Sie eine IDEE zu bekommen)

<div ng-app="testApp"> 
    <div ng-controller="helloController as mycont"> 
    <div class="container row"> 
     <form ng-submit="mycont.onSubmit()" name="mycont.form_nme"> 
     <formly-form model="mycont.test" fields="mycont.testFields"> 
      <button class="btn btn-primary" type="submit" ng-disabled="mycont.form_nme.$invalid">Submit</button> 
     </formly-form> 
     </form> 
    </div> 
    </div> 
</div> 
<script> 


    var app = angular.module('testApp', ['formly', 'formlyBootstrap']); 
    app.controller('helloController', function() { 
     var fields = this; 
     fields.testFields = [{ 
      key: 'Name', 
      type: 'input', 

      templateOptions: { 
       label: 'Full Name', 
       placeholder: 'Enter your Full name', 
       required: true 
      } 
     }, { 
      key: 'address', 
      type: 'textarea', 
      templateOptions: { 
       label: 'Address', 
       placeholder: 'Enter your address', 
       required: true 
      } 
     }, { 
      key: 'city', 
      type: 'input', 
      templateOptions: { 
       label: 'City', 
       placeholder: 'Enter your city', 
       required: true 
      } 
     }, { 
      key: 'pincode', 
      type: 'input', 
      templateOptions: { 
       label: 'Pin Code', 
       placeholder: 'Enter your Pin code', 
       required: true 
      } 
     }]; 

     fields.onSubmit = onSubmit; 

     function onSubmit() { 
      alert('form submitted: ' + JSON.stringify(fields.test)); 
     } 
    }); 
</script>