angular-ui-gridAan de slag met angular-ui-grid


Opmerkingen

Deze sectie geeft een overzicht van wat angular-ui-grid is en waarom een ontwikkelaar het misschien wil gebruiken.

Het moet ook alle grote onderwerpen binnen het hoekige-ui-raster vermelden en naar de gerelateerde onderwerpen verwijzen. Aangezien de Documentatie voor angular-ui-grid nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

Een eenvoudig raster maken

Stap 1 - Neem de uiGrid op in uw project

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

Stap 2 - Voeg de uiGrid-module toe als een afhankelijkheid van uw app

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

Stap 3 - Gegevens voor het raster

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

Stap 4 - HTML-opmaak voor het raster

Gebruik de ui-grid richtlijn en geef uw scope-eigenschap myData .

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

Dit moet een raster met twee kolommen weergeven: voornaam en achternaam.

Het neemt de sleutels van het eerste item van de gegevensreeks als kolomnamen en converteert de camelCase-stijlsleutels in juiste woorden: "firstName" naar "First Name".

Voorbeeld op Plnkr

Installatie of instellingen

Vereisten

Ondersteunde browsers:

  • IE9 +
  • Chrome
  • Firefox
  • Safari 5+
  • Opera
  • Android 4

angularjs

  • 1.4.0+

Ermee beginnen

Download de bronbestanden van ui-grid github en neem ze op in uw project inclusief de afhankelijkheden:

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

Op dit punt zou u ui-grid moeten kunnen gebruiken.