AngularJS - dividing ng-repeat into different filters or groups

Question

I have a list that I would like grouped into different sections on the page.

I currently have it divided like so (code is shortened to be easier to read) :

HttpServletRequest

I think this loops through the list for each group, which doesnt seem efficient.

I was curious if there was a better way to do this? For example, having just a single ng-repeat at the top and filtering within the child sections.

Answer 1

I could see one way to do it, by taking % Initialization k=10;l=10;m=10;n=10; K=100; L=100; B=NaN(K,L,m,n); % Just for the sake of example: vec_k=1:k; vec_l=1:l; vec_K=1:K; vec_L=1:L; A=zeros(k,l,m,n); % Interpolation for ind_m=1:m for ind_n=1:n A_aux=squeeze(A(:,:,ind_m,ind_n)); B(:,:,ind_m,ind_n)=interp2(vec_k',vec_l,A_aux,vec_K',vec_L,'spline'); end end array which will have all the filter values.

Markup

TypeFileter

Code

<div ng-repeat="role in roles | filter: { Type: TypeFileter[$index]}">
   <input class="styled" type="checkbox" value="{{ role.Value }}" />
   <label>{{ role.Name }}</label>
</div>

Answer 2

This should do the trick, if I understand correctly.

(defun make-range2 (from to result)
  (if (<= from to)
    (make-range2 (1+ from) to (cons from result))
    (reverse result)))

* (make-range2 1 5 ())
(1 2 3 4 5)

angular.module("roleApp", [])
  .controller('myCtrl', myCtrl);

function myCtrl($scope) {
  $scope.people = [{
    name: 'Penelope',
    role: 'AA'
  }, {
    name: 'Franklin',
    role: 'BB'
  }, {
    name: 'Stewart',
    role: 'CC'
  }, {
    name: 'Keith',
    role: 'DD'
  }, {
    name: 'Paula',
    role: 'EE'
  }, {
    name: 'Maria',
    role: 'BB'
  }, {
    name: 'Claudette',
    role: 'EE'
  }];


  var indexedRoles = [];

  $scope.rolesToFilter = function() {
    indexedRoles = [];
    return $scope.people;
  };

  $scope.filterRoles = function(person) {
    var roleIsNew = indexedRoles.indexOf(person.role) == -1;
    if (roleIsNew) {
      indexedRoles.push(person.role);
    }
    return roleIsNew;
  }
}

h1 {
  font-size: 16px;
  font-weight: bold;
  padding: 0;
}
h2 {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
p {
  font-size: 12px;
  margin-left: 1em;
}