javascript - How can I associate a number to a specific string and use that string to filter an iteration in AngularJS? -


i new angularjs , i'm having problems doing reusable generic filter.

let's have colors, types, , list objects seen below (new json). want make generic filter take colors , types objects , filter list object without having use string match filter.

for did specific filters strings seen below.

i have lot of information in these objects , don't want update controller each time new property being included in json.

how associate number specific string value?

old json

[     {         "id": 1,         "name": "spike",         "type": "dog",         "color": "gray"     },     {         "id": 2,         "name": "tom",         "type": "cat",         "color": "blue"     },     {         "id": 3,         "name": "butch",         "type": "cat",         "color": "black"     } ]

new jsons

// colors [     {"gray": 1},     {"black": 2},     {"blue": 3}, ]  // types  [     {"dog": 1},     {"cat": 2} ]  // data list [     {       "id": 1,       "type": 1,       "name": "spike",       "color": 1     },     {       "id": 2,       "type": 2,       "name": "tom",       "color": 3     },     {       "id": 3,       "type": 2,       "name": "butch",       "color": 2     } ]

filters

        <table class="table table-bordered table-condensed table-striped table-hover">             <thead>                 <tr>                     <th>                         <a>                             filters:                         </a>                     </th>                 </tr>             </thead>             <tbody>                 <tr ng-repeat="item in typeitems">                     <td>                         <label class="check">                             <input type="checkbox" ng-model="typefilteritems[item.type]">{{item.type}}                         </label>                     </td>                 </tr>                 <tr ng-repeat="item in coloritems">                     <td>                         <label class="check">                             <input type="checkbox" ng-model="colorfilteritems[item.color]">{{item.color}                         </label>                     </td>                 </tr>             </tbody>         </table>

list

        <table class="table table-bordered table-condensed table-striped table-hover header-fixed">             <thead>                 <tr>                     <th>id</th>                     <th>type</th>                     <th>color</th>                     <th>name</th>                 </tr>             </thead>             <tbody>                 <tr class="list" ng-repeat="item in animals | filter:typefilter | filter:colorfilter">                     <td>{{item.id}</td>                     <td>{{item.type}}</td>                     <td>{{item.color}}</td>                     <td>{{item.name}}</td>                 </tr>             </tbody>         </table>

controller 

    animals.list().then(function (data) {         $scope.animals = data;     });      $scope.colorfilteritems = { 'black': true, 'gray': false, 'blue': false }; // doing have predefined filter selection ...     $scope.coloritems = [{ name: 'black' }, { name: 'gray' }, { name: 'blue' }];      $scope.colorfilter = function (item) {         return $scope.colorfilteritems[item.color]     };      $scope.typefilteritems = { 'dog': true, 'cat': false }; // doing have predefined filter selection ...     $scope.typeitems = [{ name: 'black' }, { name: 'gray' }, { name: 'blue' }];      $scope.typefilter = function (item) {         return $scope.typefilteritems[item.type]     };

since no 1 answered found solution.

the answer use lodash directly inside service , create filter method inside promise looks selected property inside filter objects , compares them data want display.

filteranimals = () => {     intersectedresults =     _.filter(animals,(animal: ianimal) => {         var colors = _.find(colorlabels,(item: ifilter) => {             return (animal.color ? item.label === animal.color : item.label == null) && item.selected;         });         var types = _.find(typelabels,(item: ifilter) => {             return (animal.type ? item.label === animal.type : item.label == null) && item.selected;         });         return colors && types;     });     return data; };

after doing acces filteranimals() function controller , bind checkbox filters data. when doing ng-change on checkbox function executes , checks filters against data , shows data need.


-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more