açısal-ui-grid ile başlarken

Kurulum veya Kurulum

Gereksinimler:

Desteklenen Tarayıcılar:

  • IE9+
  • Krom -Firefox
  • Safari 5+
  • Opera
  • Android4

AngularJS

  • 1.4.0+

Başlarken

Kaynak dosyaları ui-grid github adresinden indirin ve bağımlılıklar dahil olmak üzere projenize ekleyin:

<link rel="styleSheet" href="release/ui-grid.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="/release/ui-grid.min.js"></script>

Bu noktada ui-grid kullanabilmelisiniz.

Basit Bir Izgara Oluşturma

1. Adım - uiGrid’i projenize dahil edin

<link rel="styleSheet" href="release/ui-grid.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="/release/ui-grid.min.js"></script>

** 2. Adım - uiGrid modülünü uygulamanıza bağımlılık olarak ekleyin**

var app = angular.module("myApp", ["ui-grid"]);

Adım 3 - Şebekeye ilişkin veriler

$scope.myData = [
    {
        "firstName": "John",
        "lastName": "Doe"
    },
    {
        "firstName": "Jane",
        "lastName": "Doe"
    }
];

Adım 4 - Izgara için HTML İşaretlemesi

‘ui-grid’ yönergesini kullanın ve ‘myData’ kapsam özelliğinizi iletin.

<div ng-controller="mainCtrl">
    <div id="grid1" ui-grid="{ data: myData }"></div>
</div>

Bu, iki sütunlu bir ızgara oluşturmalıdır - Ad ve Soyadı.

Veri dizisinin ilk öğesinin anahtarlarını sütun adları olarak alır ve camelCase stili anahtarlarını uygun sözcüklere dönüştürür: “firstName” ila “First Name”.

Plnkr örneği