Kendo Controls in an AngularJS ng-repeat

Mark_verticalKendo has long been an awesome JavaScript framework for UI controls. I had to build a user management system and needed to dynamically show a number of Kendo controls, all created via an AngularJS ng-repeat.

Kendo is smart enough to know that the item in the repeat, a user in this case, is the bound object and will keep a reference to it.

<div  ng-repeat="user in model.users">
        <input kendo-numeric-text-box
               k-min="0" k-max="10000000"
               k-ng-model="user.wealth" />
</div>

 

Advertisements

AngularJS: ng-repeat with Groups

1_iOmwue1uxW2O6sbDUEItPw.jpgHere’s a quick tip on how to display grouped data in AngularJS on your ASP.Net Core page (or any other).

Let’s say your have a list of cities, with their associated country already sorted by country then by city:

Canada Toronto
Canada Ottawa
Canada Vancouver

USA Boston
USA New York

To display the Country once, then all the cities, you can use this:

<div ng-repeat="(key, value) in data.cities| groupBy: 'country'">
    <h1>{{key}}</h1>
    <div ng-repeat="row in value">
        {{row.city}}
    </div>
</div>