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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -