代码之家 › 专栏 › 技术社区 › user3799365

ng网格填充HTML侧的网格

ng-grid angularjs

user3799365 · 技术社区 · 10 年前

我看到的ng网格的所有示例都是在控制器侧填充网格的示例。例如,如下所示:

$scope.myData = [
                 {name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34},
                 {name: "Arbaaz",age: 11},
                 {name: "Safiya",age: 6},
                 {name: "Zane", age: 4}
                 ];
$scope.gridOptions = { data: 'myData' };

然后在HTML方面,您将其用作

<div class="gridStyle" ng-grid="gridOptions"></div>

如何在HTML端填充网格。例如,在控制器内部,我调用一个服务,该服务返回一个员工列表。然后在HTML方面,我使用了一个常规表

<table><thead></thead><tbody><tr ng-repeat = "employee in employees"</tbody></table>

如何在HTML端的网格上填充从服务调用接收的员工数据,或者在控制器端预先填充。

2 回复 | 直到 10 年前

Yuriy Rozhovetskiy 10 年前

ngGrid 监视数据更改,以便您可以填充 $scope.myData 服务后的值将异步返回数据。

app.controller('MyCtrl', function($scope, $timeout) {

  // emulate async service call
  $timeout(function() {

    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                     {name: "Jacob", age: 27},
                     {name: "Nephi", age: 29},
                     {name: "Enos", age: 34}];
  }, 2000);


  $scope.gridOptions = {
    data: 'myData'
  };
});

-1

sylwester 10 年前

请参见此处: http://plnkr.co/edit/bVkGJpZdKBEOA0Uz16mh?p=preview

js文件:

    // main.js
    var app = angular.module('myApp', ['ngGrid']);

    app.service('dataService', function() {

      var data =  [{name: "Moroni", age: 50},
             {name: "Tiancum", age: 43},
             {name: "Jacob", age: 27},
             {name: "Nephi", age: 29},
             {name: "Enos", age: 34}];

      function getData() {

        return data

      }

      return {

        getData: getData

      }


    })
    app.controller('MyCtrl', function($scope, dataService) {

       //get data from service
  $scope.employees = dataService.getData();

   $scope.gridOptions = { data: 'employees' };



    });

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前