Adding auto-headers to ng-repeat in Angularjs -
i have problem trying auto-headers ng-repeat created list. code below creates header based on first letter of name changing in sorted list. code below produces headers when filter on list issues double-ups header letters. can help?
<li ng-repeat="people in address | filter:query | orderby:orderprop" alphabetical="{{people.name[0]}}" > <alphabetical-headers-from-name stem="people" listno="$index" path="path" ></alphabetical-headers-from-name> </li> var previousreffirstletter = ""; myapp.directive('alphabeticalheadersfromname', function ($compile) { return { restrict: 'e', terminal: true, scope: { stem: '=', listno: '=', path: '='}, link: function (scope, element, attrs) { var booladdheader = false; //get current element reference first letter if(scope.stem.name === undefined || scope.stem.name === null){ var reffirstletter = ""; }else{ var reffirstletter = scope.stem.name.charat(0); } //if first element of list, set comparison letter "" if(scope.listno === 0){ previousreffirstletter = ""; } var prevfirstletter = previousreffirstletter //compare current letter previous letter. if there difference, need create header. if (previousreffirstletter.touppercase() !== reffirstletter.touppercase()){ booladdheader = true; previousreffirstletter = reffirstletter; } //create header (if required) if(booladdheader){ element.append('<li class="heading">'+reffirstletter+'</li>'); } //create list element. element.append('<a href="'+ scope.path + scope.stem.id +'">'+scope.stem.name+'</a>'); $compile(element.contents())(scope.$new()); } } });
see plunker here: http://plnkr.co/edit/wsxhdolk8lxrnyzfhls9?p=preview
var data = [ {name:'john', age:25, gender:'boy'}, {name:'jessie', age:30, gender:'girl'}, {name:'johanna', age:28, gender:'girl'}, {name:'joy', age:15, gender:'girl'}, {name:'mary', age:28, gender:'girl'}, {name:'peter', age:95, gender:'boy'}, {name:'sebastian', age:50, gender:'boy'}, {name:'erika', age:27, gender:'girl'}, {name:'patrick', age:40, gender:'boy'}, {name:'samantha', age:60, gender:'girl'} ]; $scope.members = _.reduce( data, function(output, name) { var lcase = name.name.tolowercase(); if (output[lcase[0]]) //if lcase key output[lcase[0]].push(name); //add name list else output[lcase[0]] = [name]; // else add key return output; }, {} );
html
<div ng-repeat="(header,data) in members"> <h1>{{header}}</h1> <section ng-repeat="member in data"> {{member.name}} </section> </div>
Comments
Post a Comment