javascript - Angular Checkbox Filter with Paginator -

-

i'm using angularjs paginator, https://github.com/michaelbromley/angularutils/tree/master/src/directives/pagination. , i'm using example in this video add checkbox filters ng-repeat. want filter based on whether specie property of every animal object (animal.specie) cat or dog. start setting both true ng-repeat doesn't populate when that. , when check box true or false nothing happens.

the thing in controller $scope.species = {dogs: true, cats: true};

what wrong implementation? appreciated.

thanks :)

    <div class="row adopt-title-wrap">     <div class="medium-6 large-6 column">         <h3>find next best friend</h3>     </div>     <div class="medium-2 large-2 end column">         <input type="checkbox" ng-model="species.cats">         <label>cats only</label>     </div>     <div class="medium-2 large-2 end column">         <input type="checkbox" ng-model="species.dogs">         <label>dogs only</label>     </div> </div><br>  <i class="fa fa-spinner fa-pulse fa-3x"></i>  <div class="row">     <!-- start single animal record -->     <div class="medium-6 large-6 end column" dir-paginate="animal in animals                                                         | filter: {specie: 'dog'} : species.dogs                                                         | filter: {specie: 'cat'} : species.cats                                                         | itemsperpage: 6">         <div class="panel">             <img class="pet-img" ng-src="{{ animal.profile_photo }}" alt="pet adoption">             <ul class="pet-details">                 <li class="pet-field-title">name</li>                 <li class="pet-field-value">{{ animal.name }}</li>                 <li class="pet-field-title">age</li>                 <li class="pet-field-value">{{ animal.dob }}</li>                 <li class="pet-field-title">breed</li>                 <li class="pet-field-value">{{ animal.breed }}</li>                 <li class="pet-field-title">code</li>                 <li class="pet-field-value">{{ animal.shelter_code }}</li>             </ul>             <p class="pet-description">{{ animal.description }}</p>         </div>     </div> <!-- end single animal record --> </div>  <dir-pagination-controls></dir-pagination-controls>

i recommend stripping down code base, maybe displayed , migrate pagination. can spot first issue applying 2 filters on specie.

dir-paginate="animal in animals | filter: {specie: 'dog'} | filter: {specie: 'cat'}"

is saying filter down animals both dog and cat. first filter return array of dogs, second filter run on finding cats, none because can't dog , cat :)

original array: [{name: 'bob', specie: 'cat'}, {name: 'jeff', specie: 'dog'}] | filter dogs | filter cats after first filter (only dogs): [{name: 'jeff', specie: 'dog'}] | filter cats  after second filter (only animals both dogs , cats): []

try defining own angular filter simplify work so:

.filter('iscatordog', function() {     return function(inputanimals) {        return inputanimals.filter(function(animal) {           return animal.value === 'cat' || animal.value === 'dog';        });     } });

and call filter so:

dir-paginate="animal in animals | iscatordog"

basic plunkr


Comments

Post a Comment

Popular posts from this blog

qt - Using float or double for own QML classes -

-
i've created components , helper methods using c++ , qt used in qml gui. of methods calculate gui elements (size, transformations, scene graph items creation). target arm 32 bit using opengl / eglfs render output. opengl using float , qml using real (defined double ). what should use in c++ do not lose precision? if use qreal ( double ) shouldn't lose precision. if git grep float in qtbase.git , can find out bit more: dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0-* important behavior changes * dist/changes-5.2.0-**************************************************************************** dist/changes-5.2.0- dist/changes-5.2.0- - qt compiled qreal typedef'ed double on dist/changes-5.2.0: platforms. qreal float on arm chipsets before. guarantees more dist/changes-5.2.0- consistent behavior between platforms qt supports, binary dist/chan...
Read more

Create Outlook appointment via C# .Net -

-
i need create outlook appointment using microsoft.office.interop.outlook , while can work locally on own workstation , works if run web application via server's browser, not work when connect server externally. hence, think might permission issue. i changed application pool identity " localsystem " don't access denied error. unfortunately, doesn't work. the app behaves if appointment created, appointment doesn't appear in outlook. here include file on top of aspx.cs page using outlook = microsoft.office.interop.outlook; here code using pop appointment. outlook.application apptapp = new outlook.application(); outlook.appointmentitem appt = apptapp.createitem(outlook.olitemtype.olappointmentitem) outlook.appointmentitem; appt.subject = txtfirstname.text + " " + txtlastname.text; appt.body = txtcomment.text; appt.alldayevent = false; appt.start = datetime.parse(txtreminderdate.text + " 8:00 am"); appt.end = datetime.p...
Read more

ios - Swift Array Resetting Itself -

-
i have 2 arrays: pointhistory , datehistory . have nstimer , , when timer runs out, action called. in action appending int pointhistory , , current date string datehistory . here timer action: func timeraction() { let steppervalue = int(stepper.value) employee.numberofpoints = steppervalue networking.saveemployee(employee, completion: { (error) -> void in if error != nil { let alert = uialertcontroller(title: "error", message: "there error updating \(self.employee.name)'s points", preferredstyle: .alert) let alertaction = uialertaction(title: "ok", style: .cancel, handler: nil) alert.addaction(alertaction) self.presentviewcontroller(alert, animated: true, completion: nil) } }) var dateformatter = nsdateformatter() dateformatter.dateformat = "mm-dd-yyyy" dateformatter.timezone = nstimezone.localtimezone() var date = nsdate() var ...
Read more