如何将数据获取到Json文件并使用角度js创建UI网格?没有使用MVC?

时间:2016-08-04 10:33:10

标签: jquery asp.net angularjs json datagridview

我必须使用Angular JS在Html页面中将数据库表填充为网格视图。我使用cs文件和数据访问层来获取表数据的Json字符串。现在我如何将json字符串处理成Html页面?

1 个答案:

答案 0 :(得分:0)

我有类似的要求,但我需要使用json文件填充一组字段,为了实现这一点,我使用了angular formly,它读取JSON文件并将其转换为表单UI输入

您可以了解角度here

在角度js中创建服务并从数据库中获取JSON数据,然后使用angular formly动态填充网格UI

这是我通过读取JSON文件使用角度形式创建表单输入的代码(此代码是为了获取IDEA)

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