Asked  7 Months ago    Answers:  5   Viewed   155 times

I have a list of players which belong to a group each. How can I use a filter to list the users per group?

[{name: 'Gene', team: 'team alpha'},
 {name: 'George', team: 'team beta'},
 {name: 'Steve', team: 'team gamma'},
 {name: 'Paula', team: 'team beta'},
 {name: 'Scruath of the 5th sector', team: 'team gamma'}];

I'm looking for this result:

  • team alpha
    • Gene
  • team beta
    • George
    • Paula
  • team gamma
    • Steve
    • Scruath of the 5th sector

 Answers

90

You can use groupBy of angular.filter module.
so you can do something like this:

JS:

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];

HTML:

<ul ng-repeat="(key, value) in players | groupBy: 'team'">
  Group name: {{ key }}
  <li ng-repeat="player in value">
    player: {{ player.name }} 
  </li>
</ul>

RESULT:
Group name: alpha
* player: Gene
Group name: beta
* player: George
* player: Paula
Group name: gamma
* player: Steve
* player: Scruath

UPDATE: jsbin Remember the basic requirements to use angular.filter, specifically note you must add it to your module's dependencies:

(1) You can install angular-filter using 4 different methods:

  1. clone & build this repository
  2. via Bower: by running $ bower install angular-filter from your terminal
  3. via npm: by running $ npm install angular-filter from your terminal
  4. via cdnjs http://www.cdnjs.com/libraries/angular-filter

(2) Include angular-filter.js (or angular-filter.min.js) in your index.html, after including Angular itself.

(3) Add 'angular.filter' to your main module's list of dependencies.

Tuesday, June 1, 2021
 
daiscog
answered 7 Months ago
95

UPDATE: Here's an easier way than what was there before.

 <input ng-model="query">
 <div ng-repeat="item in (filteredItems = (items | orderBy:'order_prop' | filter:query | limitTo:4))">
   {{item}}
 </div>

Then $scope.filteredItems is accessible.

Wednesday, June 2, 2021
 
Corsair
answered 7 Months ago
72

Use attribute binding syntax instead

<ol class="viewer-nav"><li *ngFor="let section of sections" 
    [attr.data-sectionvalue]="section.value">{{ section.text }}</li>  
</ol>

or

<ol class="viewer-nav"><li *ngFor="let section of sections" 
    attr.data-sectionvalue="{{section.value}}">{{ section.text }}</li>  
</ol>

See also :

  • How to add conditional attribute in Angular 2?
Saturday, June 5, 2021
 
TMichel
answered 7 Months ago
61

There is already logged issue in ui-router Github, you could found it here

In order to solve this you need to add this code inside your config which will take care of encoding and decoding of url.

you could override the built-in string type (which is performing the slash encoding) by registering your own replacement "string" type using below code

Code

app.config(['$urlMatcherFactory', '$stateProvider', function($urlMatcherFactory, $stateProvider) {
    //$stateProvider.state() & other code here

    function valToString(val) {
        return val != null ? val.toString() : val;
    }

    function regexpMatches(val) { /*jshint validthis:true */
        return this.pattern.test(val);
    }
    $urlMatcherFactory.type("string", {
        encode: valToString,
        decode: valToString,
        is: regexpMatches,
        pattern: /[^/]*/
    });
}]);

Working Plunkr

Friday, August 6, 2021
 
ritch
answered 4 Months ago
17

Firefox doesn't support a date in that format, you will have to replace the dash's with slashes first.

var d = new Date(input.replace(/-/g, '/'));
Wednesday, November 10, 2021
 
donito
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share