2014-12-18 7 views
0

나는 1000 개 이상의 데이터를 가지고 있으며 ngTable에 배치해야하지만 1 열 대신이 데이터를 여러 개의 열로 나누어야합니다 (예 : 2 개, 필터 및 페이지 매김 20 개 항목 이후). ngTable로 가능합니까?ngtable의 여러 열로 데이터를 분할하는 방법은 무엇입니까?

예 : 100 개의 항목이 있습니다. 첫 번째 페이지에서 나는 첫 번째 열에 첫 번째 20 개 항목 및 두 번째 열에있는 두 번째 20 항목.

다음은 내 템플릿

$scope.items = { 
    "title": "Task", 
    "instanceData": ["MOD_INT_REPL_INTERFACE_OBJ_DLY", "MOD_INT_REPL_INTERFACE_OBJ_DLY_test", "Test_By_Justin", "ENG_ATTACHMENT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_CASE_TO_SFDC_PATIENT_CASE_INSERT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_PRODUCT_TO_SFDC_PATIENT_PRODUCT_INSERT", "US_SYNC_ODS2ATHENS_ADDR_ATHENSID", "test", " US_VEVA_2_ODS_REPL_Customer_Maintenance", " US_VEVA_2_ODS_REPL_USER_TERR", "AAAA", "AAATEST5", "ACCT_VIS_ZIP_TO_TERR_FLTR", "ADDRESS_MERGE_PROC_TEST", "AGGSPEND_ODStoFF _WKLY", "ARA_USER_TERR", "Account_StgtoODS_Account", "Account_StgtoODS_Account_Old", "Account_edit", "ActivityLog", "Address_STGtoODS_Address", "Address_STGtoODS_Address_Old", "Affiliation_CMtoATHENS_STGtoODS", "BAV_ACCT_TERR_LOAD_DELTA", "BAV_BUS_ACNT_ALIGN", "BAV_REP_ALIGN", "BAV_UPDATE_TSF", "CALL2_SAMPLE replication inMIG", "CALL_OUTBOUND_DELETE", "CA_CIRCULO_INTERFACE_REPL_OBJ", "CA_CIRCULO_REPL_ACCOUNT", "CA_CIRCULO_REPL_ADDRESS", "CA_CIRCULO_REPL_CALL", "CA_CIRCULO_REPL_CALLSAMPLE", "CA_CIRCULO_REPL_PRODUCTCATALOG", "CA_CIRCULO_REPL_USER", "CEG_ACCOUNT_UPDATE", "CEG_ACCOUNT_UPDATE1", "CI_Agra_Samples_FF_STG", "CM_US_REPLtoFF_ACCOUNT", "CM_US_REPLtoFF_ADDRESS", "CM_US_REPLtoFF_CHILD_ACCOUNT", "CM_US_REPLtoFF_CHILD_ACCOUNT_Test", "CUSTOM_INTEGRATION_TEST", "Agra_Account_Merge_Id", "Agra_Samples_FF_to_STG1", "Agra_Samples_Product_OB", "Agra_Samples_STG1_to_STG2", "Agra_Samples_User_OB", "Consent", "Corp_BI_NZ_OR", "Corp_BI_SYC_ORA_NTZ", "CyclePlan", "CyclePlan Detail"] 
}; 

    $scope.namingConventionParams = new ngTableParams({ 
    page: 1, // show first page 
    count: 10 
}, { 
    defaultSort: "asc", 
    total: $scope.items.instanceData.length, // length of data 
    counts: [], 
    getData: function($defer, params) { 
     var orderedData = params.sorting() ? $filter('orderBy')($scope.items.instanceData, params.orderBy()) : $scope.items.instanceData; 
     orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData; 
     $scope.task_data = orderedData; 
     $scope.task_data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); 
     params.total(orderedData.length); 
     $defer.resolve($scope.task_data); 
    } 
}); 

업데이트

가 여기 내 plunker link입니다

<div class="col-md-12"> 
    <form role="search" class="navbar-form navbar-left"> 
     <div class="form-group"> 
      <input type="text" placeholder="Search" class="form-control search-inputbox" ng-model="namingConventionSearchText" /> 
     </div> 
    </form> 
</div> 
<table class="table" ng-table="namingConventionParams"> 
    <tr ng-repeat="item in items.instanceData | filter:namingConventionSearchText"> 
     <td style="word-break:break-all">{{item}}</td> 
    </tr> 
</table> 

컨트롤러 코드입니다.

답변

1

우선 ngTable에 바인딩하기 전에 객체 배열에 문자열 배열을 매핑하려고합니다. 그러면 ngTable에 자연스럽게 느껴질 것입니다. 이 같은 ["string A", "string B"][ { index: '0', text: 'string A'}, { index: '1', text: 'string B'}];으로 매핑됩니다.

이것은 하나의 문자열 배열을 균등하게 페이지 당 두 개의 열로 나눈 것입니다. 내가 사용하는 사용자 지정 범위 필터에 기록해 둡니다 :

var app = angular.module('main', ['ngTable']) 
 
    .filter('slice', function() { 
 
    return function(items, page, size) { 
 
     return items.slice((page - 1) * size, page * size); 
 
    } 
 
    }) 
 
    .filter('range', function() { 
 
    return function(start, length) { 
 
     var range = []; 
 
     for(var i = start; i < start + length; i++) { 
 
     range.push(i); 
 
     } 
 
     return range; 
 
    } 
 
    }) 
 
    .controller('DemoCtrl', function($scope, $filter, ngTableParams, $log) { 
 
    $scope.items = { 
 
     "title": "Task", 
 
     "tableHeader": "Items", 
 
     "instanceData": ["MOD_INT_REPL_INTERFACE_OBJ_DLY", "MOD_INT_REPL_INTERFACE_OBJ_DLY_test", "Test_By_Justin", "ENG_ATTACHMENT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_CASE_TO_SFDC_PATIENT_CASE_INSERT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_PRODUCT_TO_SFDC_PATIENT_PRODUCT_INSERT", "US_SYNC_ODS2ATHENS_ADDR_ATHENSID", "test", " US_VEVA_2_ODS_REPL_Customer_Maintenance", " US_VEVA_2_ODS_REPL_USER_TERR", "AAAA", "AAATEST5", "ACCT_VIS_ZIP_TO_TERR_FLTR", "ADDRESS_MERGE_PROC_TEST", "AGGSPEND_ODStoFF _WKLY", "ARA_USER_TERR", "Account_StgtoODS_Account", "Account_StgtoODS_Account_Old", "Account_edit", "ActivityLog", "Address_STGtoODS_Address", "Address_STGtoODS_Address_Old", "Affiliation_CMtoATHENS_STGtoODS", "BAV_ACCT_TERR_LOAD_DELTA", "BAV_BUS_ACNT_ALIGN", "BAV_REP_ALIGN", "BAV_UPDATE_TSF", "CALL2_SAMPLE replication inMIG", "CALL_OUTBOUND_DELETE", "CA_CIRCULO_INTERFACE_REPL_OBJ", "CA_CIRCULO_REPL_ACCOUNT", "CA_CIRCULO_REPL_ADDRESS", "CA_CIRCULO_REPL_CALL", "CA_CIRCULO_REPL_CALLSAMPLE", "CA_CIRCULO_REPL_PRODUCTCATALOG", "CA_CIRCULO_REPL_USER", "CEG_ACCOUNT_UPDATE", "CEG_ACCOUNT_UPDATE1", "CI_Agra_Samples_FF_STG", "CM_US_REPLtoFF_ACCOUNT", "CM_US_REPLtoFF_ADDRESS", "CM_US_REPLtoFF_CHILD_ACCOUNT", "CM_US_REPLtoFF_CHILD_ACCOUNT_Test", "CUSTOM_INTEGRATION_TEST", "Agra_Account_Merge_Id", "Agra_Samples_FF_to_STG1", "Agra_Samples_Product_OB", "Agra_Samples_STG1_to_STG2", "Agra_Samples_User_OB", "Consent", "Corp_BI_NZ_OR", "Corp_BI_SYC_ORA_NTZ", "CyclePlan", "CyclePlan Detail", "CyclePlan Detail UPD", "CyclePlan TG", "CyclePlan UPD", "DELETE_ACCOUNT_FILT_NUCLEUS", "DELETE_LOV_REPOSITORY", "DELETE_TIME_OFF_TERITTORY", "DEL_EVNT_ATND", "DUMMIES", "Filewatcher Test", "MOD ACCT TERR LOADER DELTA ORM", "MOD ACCT TERR LOADER DELTA ORM W2", "MOD ACCT TERR LODER CP NORM ORM", "MOD ACCT TERR LODER CP NORM ORM W2", "MOD ACCT TERRITORY LOADER NORM ORM", "MOD ACCT TERRITORY LOADER NORM ORM W2", "MOD ATL NULL UPDATE_ORM", "MOD ATL NULL UPDATE_ORM_W2", "MOD Account Terty Loader Sync_ORM", "MOD Account Terty Loader Sync_ORM_W2", "MOD BRICK TO TERR DATA CLEAN ORM", "MOD BRICK TO TERR DATA CLEAN ORM W2", "MOD TA ACCT TERR LOADER COMB ORM", "MOD TA ACCT TERR LOADER COMB ORM W2", "MOD TA CALLING SP SYNC ORM", "MOD TA CALLING SP SYNC ORM W2", "MOD TA COUNTRY EU ORM", "MOD TA COUNTRY EU ORM_W2", "MOD TA CYCLE PLAN POWER CENTER ORM", "MOD TA CYCLE PLAN POWER CENTER ORM W2", "MOD TA RULE DELIMIT ORM", "MOD TA RULE DELIMIT ORM W2", "MOD TA RULE SPLIT SYNC ORM", "MOD TA RULE SPLIT SYNC ORM W2", "MOD TA USER NOTIFICATION_ORM", "MOD TA USER NOTIFICATION_ORM_W2", "MOD_CEG_ACCNTRELATIONS_INBOUND", "MOD_CEG_ACCNTRELATIONS_INBOUND_2", "MOD_CEG_ADDR_DEL", "MOD_CEG_AFFILIATIONS_INBOUND", "MOD_CEG_CHILD_ACNT_DEL", "MOD_CEG_Child_Account_PRIM_UNCHECK", "MOD_CEG_Codes_INBOUND", "MOD_CEG_INDIVIDUALADDR_INBOUND", "MOD_CEG_INDIVIDUAL_INBOUND", "MOD_CEG_Interest_Inbound", "MOD_CEG_Organisation_INBOUND", "MOD_CEG_Organisation_NAME_UPD", "MOD_CEG_REPL_ACCOUNT", "MOD_CEG_REPL_ACCOUNT_2", "MOD_CEG_REPL_ACCOUNT_GROUP", "MOD_CEG_REPL_ACCOUNT_PLAN_ACCOUNT_GROUP", "MOD_CEG_REPL_ADDRESS", "MOD_CEG_REPL_CALL2_VOD", "MOD_CEG_REPL_CHILD_ACCOUNT", "MOD_CEG_REPL_LOV", "MOD_CEG_REPL_Medical_EVENT_VOD", "MOD_CEG_REPL_QUESTION", "MOD_CEG_REPL_QUESTION_RESPONSE", "MOD_CEG_REPL_RECORDTYPE", "MOD_CEG_REPL_SHR_MEETING_COST", "MOD_CEG_REPL_SURVEY", "MOD_CEG_REPL_SURVEY_QUESTION", "MOD_CEG_REPL_SURVEY_TARGET", "MOD_CEG_Roles_INBOUND", "MOD_CEG_Speciality_Inbound", "MOD_CEG_Title_INBOUND", "MOD_CEG_VAL_REQ_REPL", "MOD_CEG_WORKPLACEADDR_INBOUND", "MOD_CYCLE_PLAN_TARGETS", "MOD_INDI_ADDRESS_DELETE", "MOD_IND_ADDRESS", "MOD_IND_ADDR_UPD", "MOD_INT_ORM_SYNC_TRACKING", "MOD_INT_ORM_REPL_INTERFACE_OBJ_DLY", "MOD_INT_ORM_REPL_INTERFACE_OBJ_DLY_W2", "MOD_INT_ORM_REPL_OTHER_OBJECTS_DLY", "MOD_INT_ORM_REPL_OTHER_OBJECTS_DLY_W2", "MOD_INT_ORM_REPL_SFDC_DM", "MOD_INT_ORM_SYNC_DM_CALL", "MOD_INT_ORM_SYNC_DM_CALL_DETAIL", "MOD_INT_ORM_SYNC_DM_CALL_KEY_MESSAGE", "MOD_INT_ORM_SYNC_DM_CALL_SAMPLES", "MOD_INT_ORM_SYNC_DM_CYCLE_PLAN", "MOD_INT_ORM_SYNC_DM_CYCLE_PLAN_DETAIL", "MOD_INT_ORM_SYNC_DM_CYCLE_PLAN_TARGET", "MOD_INT_REPL_INTERFACE", "MOD_INT_REPL_INTERFACE_OBJ_DLY_BKP1", "MOD_INT_REPL_INTERFACE_OBJ_DLY_Dummy", "MOD_INT_REPL_INTERFACE_OBJ_DLY_TEST1", "MOD_INT_REPL_USER", "MOD_INT_SYNC_CALLS", "MOD_INT_SYNC_CALLS_SAMPLE", "MOD_INT_SYNC_CALLS_STATUS_UPD", "MOD_MIG_REPL_Account", "MOD_MIG_REPL_Account_2", "MOD_MIG_REPL_Questions", "MOD_MIG_REPL_Survey_Questuions", "MOD_MIG_REPL_Survey_Targets", "MOD_MIG_REPL_Surveys", "MOD_MIG_SYNC_CONSENT", "MOD_MIG_SYNC_QUESTION", "MOD_MIG_SYNC_QUESTION_RESP", "MOD_MIG_SYNC_SURVEY", "MOD_MIG_SYNC_SURVEY_QUESTIONS", "MOD_MIG_SYNC_SURVEY_TARGET", "MOD_MIG_SYNC_User", "MOD_SYNC_BALA_ACCOUNT2", "MOD_TA_ERROR_LOGIC ORM", "MOD_TA_ERROR_LOGIC ORM W2", "MOD_BALA", "MOD_BALA_2", "MOD_BALA_ACCOUNT", "MOD_BALA_CYCLE_PLAN", "MOD_BALA_OUTFILE", "MOD_BALA_OUTFILE_2", "SHANKAR", "SHANKAR_ALL_COLS", "SHANKAR_MIGRATE_TEST", "SHANKAR_SYNC_TEST", "JP_CLEANUP_ACCOUNT_CYCLE1_SYNC", "JP_CLEANUP_ADDRESS_CYCLE1_SYNC", "JP_CLEANUP_CALL2_CYCLE1_SYNC", "JP_CLEANUP_CHILD_CYCLE1_SYNC", "JP_CLEANUP_CYCLE1_REPL", "JP_UPD_BF_CLEANUP_CALL2_CYCLE1_SYNC", "JP_UPD_BF_CLEANUP_CALL2_CYCLE1_SYNC_2", "Login", "Logon_REST", "Migration_Test", "New", "OUS_ATHENS_REPL", "PC_STG_ADDRESS_to_ODS_ADDRESS_Test", "PC_US_FFtoSTG_CM_Dedupe_Xref", "PC_US_FFtoSTG_MDS_Territory_Alignment", "PC_US_IBtoIB_CM_Cust_Xref_MIX", "PC_US_IBtoOB_ATL_MigData", "PC_US_IBtoOB_ATL_RawData", "PC_US_IBtoOB_CyclePlan_Ups", "PC_US_IBtoOB_CyclePlnDtl_Ups", "PC_US_IBtoOB_CyclePlnTgt_Ups", "PC_US_IBtoOB_TSF_Upsert", "PC_US_MDS_FFtoSTG_Call_Guidance ", "PC_US_MDS_FFtoSTG_Call_Guidance_ADHD", "PC_US_MDS_FFtoSTG_Call_Guidance_GI", "PC_US_REPLtoSTG_Terr_Temp", "PC_US_RepltoOB_CyclePln_GetID", "Pattern_test", "REPL_SPL_REC_ACCNTTYPE", "Repl_BAV_mig1todev", "SPL_CHR_FF2STG", "SPL_CHR_REPL2FF", "SPL_CHR_STG2ODS", "Shyam_test", "Test Job", "Test Repl", "Test_1", "Test_account_replciation", "ENG_Attachment", "ENG_Attachment_Oracle_to_Oracle", "ENG_Attachment_REPL_CLOBtoBlob", "ENG_CONV_Account_ISDELETED_UPD", "ENG_CONV_Account_ISDELETED_UPD_2", "ENG_CONV_Attachment_ISDELETED_UPD", "ENG_CONV_Contact_ISDELETED_UPD", "ENG_CONV_IW_CONSENT_UPD", "ENG_CONV_Infusion_training_ISDELETED_UPD", "ENG_CONV_PATIENT_ADDRESS_TO_SFDC_ADDRESS", "ENG_CONV_PATIENT_CASE_UPDATE", "ENG_CONV_PATIENT_CONTACT_TO_SFDC_CONTACT", "ENG_CONV_PATIENT_CONTACT_UPDATE", "ENG_CONV_PATIENT_TO_SFDC_CONTACT_2", "ENG_CONV_TO_SFDC_ACCOUNT", "ENG_CONV_Task_ISDELETED_UPD", "ENG_CONV_US_PM_Address_ISDELETED_UPD", "ENG_CONV_US_PM_Case_DMODosition_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Caregiver_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Case_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Consent_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Physician_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Product_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Product_Shipment_ISDELETED_UPD", "ENG_CONV_US_PM_Patient_Site_Of_Care_ISDELETED_UPD", "ENG_CONV_US_PM_Service_Request_ISDELETED_UPD", "ENG_CONV_Z_SFDC_ACCOUNT_PATIENT_SOC_TO_SFDC_ACCOUNT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_ACCOUNT_PATIENT_SOC_TO_SFDC_ACCOUNT_UPSERT", "ENG_CONV_Z_SFDC_ACCOUNT_PAYER_TO_SFDC_ACCOUNT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_ACCOUNT_PAYER_TO_SFDC_ACCOUNT_UPSERT", "ENG_CONV_Z_SFDC_ACCOUNT_PHYSICIAN_SOC_TO_SFDC_ACCOUNT_UPSERT", "ENG_CONV_Z_SFDC_ACCOUNT_SOC_TO_SFDC_ACCOUNT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_ACCOUNT_SOC_TO_SFDC_ACCOUNT_UPSERT", "ENG_CONV_Z_SFDC_ADDITIONAL_SOC_TO_SFDC_Additional_Site_of_Care__c_LEGACYID_UPD", "ENG_CONV_Z_SFDC_ADDITIONAL_SOC_TO_SFDC_Additional_Site_of_Care__c_UPSERT", "ENG_CONV_Z_SFDC_ADDRESS_TO_SFDC_US_PM_ADDRESS_INSERT", "ENG_CONV_Z_SFDC_ATTACHEMENT_TO_SFDC_ATTACHEMENT_INSERT", "ENG_CONV_Z_SFDC_ATTACHEMENT_TO_SFDC_ATTACHEMENT_INSERT_64KB", "ENG_CONV_Z_SFDC_ATTACHEMENT_TO_SFDC_ATTACHEMENT_INSERT_Test", "ENG_CONV_Z_SFDC_CONTACT_CAREGIVER_TO_SFDC_CONTACT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_CONTACT_CAREGIVER_TO_SFDC_CONTACT_UPSERT", "ENG_CONV_Z_SFDC_CONTACT_PATIENT_TO_SFDC_CONTACT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_CONTACT_PATIENT_TO_SFDC_CONTACT_UPSERT", "ENG_CONV_Z_SFDC_CONTACT_PHYSICIAN_TO_SFDC_CONTACT_LEGACYID_UPD", "ENG_CONV_Z_SFDC_CONTACT_PHYSICIAN_TO_SFDC_CONTACT_UPSERT", "ENG_CONV_Z_SFDC_CONTACT_UPD_PRODUCT", "ENG_CONV_Z_SFDC_INFUSION_TRAINING_TO_SFDC_INFUSION_TRAINING_INSERT", "ENG_CONV_Z_SFDC_PATIENT_CAREGIVER_TO_SFDC_PATIENT_CAREGIVER_LEGACYID_UPD", "ENG_CONV_Z_SFDC_PATIENT_CAREGIVER_TO_SFDC_PATIENT_CAREGIVER_UPSERT", "ENG_CONV_Z_SFDC_PATIENT_CONSENT_TO_SFDC_US_PM_Patient_Consent__c_INSERT", "ENG_CONV_Z_SFDC_PATIENT_PHYSICAN_TO_SFDC_PATIENT_PHYSICIAN_LEGACYID_UPD", "ENG_CONV_Z_SFDC_PATIENT_PHYSICAN_TO_SFDC_PATIENT_PHYSICIAN_UPSERT", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_INSERT", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_INSERT_BATCH1", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_INSERT_BATCH50", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_INSERT_old", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT_1", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT_2", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT_3", "ENG_CONV_Z_SFDC_PATIENT_PRODUCTSHIPMENT_TO_SFDC_US_PM_PATIENT_PRODUCT_SHIPMENT_UPSERT_4", "ENG_CONV_Z_SFDC_PATIENT_SOC_TO_SFDC_PATIENT_SOC_LEGACYID_UPD", "ENG_CONV_Z_SFDC_PATIENT_SOC_TO_SFDC_PATIENT_SOC_UPSERT", "ENG_CONV_Z_SFDC_TASK_CYCLE_TO_SFDC_TASK_INSERT", "ENG_CONV_Z_SFDC_TASK_EVENT_TO_SFDC_TASK_INSERT", "ENG_CONV_Z_SFDC_TASK_EVENT_TO_SFDC_TASK_INSERT_SQ", "ENG_CONV_Z_SFDC_US_PM_CASE_DMODOSITION_TO_SFDC_CASE_DMODOSITION_INSERT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_CASE_TO_SFDC_PATIENT_CASE_UPSERT", "ENG_CONV_Z_SFDC_US_PM_PATIENT_PRODUCT_TO_SFDC_PATIENT_PRODUCT_UPD", "ENG_CONV_Z_SFDC_US_PM_SERVICE_REQUEST_TO_SFDC_SERVICE_REQUEST_INSERT ", "ENG_MDM_IB_ACCOUNT_INS", "ENG_MDM_IB_ACCOUNT_UPD", "ENG_MDM_IB_ADDITIONAL_SOC_INS", "ENG_MDM_IB_CONTACT_INS", "ENG_MDM_IB_CONTACT_UPD", "ENG_MDM_IB_DUMMY_ACCOUNT_INS", "ENG_MDM_IB_IDENTIFIER_ACCOUNT_UPD", "ENG_MDM_IB_IDENTIFIER_CONTACT_UPD", "ENG_MDM_OB_DATA_STD_LASTNAME", "ENG_MDM_OB_DATA_STD_SPECIALTY", "ENG_MDM_OB_DATA_STD_SUFFIX", "ENG_SFDCINT_ODS_SFDC_REPL_ACCOUNT", "ENG_SFDC_CONTACT_TO_CNTRL_SFDC_CONTACT", "ENG_SFDC_TO_ODS_SFDC_REPL_ACCOUNT", "ENG_SFDC_TO_ODS_SFDC_REPL_ACTION_ITEM", "ENG_SFDC_TO_ODS_SFDC_REPL_Account_Partner", "ENG_SFDC_TO_ODS_SFDC_REPL_Account_Share", "ENG_SFDC_TO_ODS_SFDC_REPL_Account_Team_Member", "ENG_SFDC_TO_ODS_SFDC_REPL_Additional_Attendee", "ENG_SFDC_TO_ODS_SFDC_REPL_Additional_Site_of_Care", "ENG_SFDC_TO_ODS_SFDC_REPL_Address", "ENG_SFDC_TO_ODS_SFDC_REPL_Admin_Country_Region", "ENG_SFDC_TO_ODS_SFDC_REPL_Asset", "ENG_SFDC_TO_ODS_SFDC_REPL_Attachment", "ENG_SFDC_TO_ODS_SFDC_REPL_Awards_and_Honors", "ENG_SFDC_TO_ODS_SFDC_REPL_Books_and_Monographs", "ENG_SFDC_TO_ODS_SFDC_REPL_CONCEPT_BRIEF", "ENG_SFDC_TO_ODS_SFDC_REPL_Campaign", "ENG_SFDC_TO_ODS_SFDC_REPL_Campaign_Member", "ENG_SFDC_TO_ODS_SFDC_REPL_Case", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_Comment", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_Contact_Role", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_DMODosition", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_Solution", "ENG_SFDC_TO_ODS_SFDC_REPL_Case_Team_Member", "ENG_SFDC_TO_ODS_SFDC_REPL_Clinical_Trials", "ENG_SFDC_TO_ODS_SFDC_REPL_Committees", "ENG_SFDC_TO_ODS_SFDC_REPL_Competitor", "ENG_SFDC_TO_ODS_SFDC_REPL_Contact", "ENG_SFDC_TO_ODS_SFDC_REPL_Contact_1", "ENG_SFDC_TO_ODS_SFDC_REPL_Contact_2", "ENG_SFDC_TO_ODS_SFDC_REPL_Contract", "ENG_SFDC_TO_ODS_SFDC_REPL_Country", "ENG_SFDC_TO_ODS_SFDC_REPL_Customer_Business_Plan", "ENG_SFDC_TO_ODS_SFDC_REPL_DASHBOARD", "ENG_SFDC_TO_ODS_SFDC_REPL_DASHBOARD_COMPONENT", "ENG_SFDC_TO_ODS_SFDC_REPL_De-Identified_Patient", "ENG_SFDC_TO_ODS_SFDC_REPL_Dropped_Item", "ENG_SFDC_TO_ODS_SFDC_REPL_Editorial_Boards", "ENG_SFDC_TO_ODS_SFDC_REPL_Educational_Activity", "ENG_SFDC_TO_ODS_SFDC_REPL_Event"], 
 
     groups: 2 
 
    }; 
 
    $scope.tableFilter = {}; 
 
    $scope.namingConventionParams = new ngTableParams({ 
 
     page: 1, // show first page 
 
     count: 20, 
 
     filer: $scope.tableFilter 
 
    }, { 
 
     defaultSort: "asc", 
 
     total: $scope.items.instanceData.length, // length of data 
 
     counts: [], 
 
     getData: function($defer, params) { 
 
      var reverceOrder = params.orderBy() && params.orderBy().length > 0 && params.orderBy()[0].indexOf('-') > -1; 
 
      var orderedData = params.sorting() ? $filter('orderBy')($scope.items.instanceData, 'valueOf()', reverceOrder) : $scope.items.instanceData; 
 
      orderedData = $scope.tableFilter ? $filter('filter')(orderedData, $scope.tableFilter.text) : orderedData; 
 
      $scope.task_data = orderedData; 
 
      $scope.task_data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); 
 
      params.total(orderedData.length); 
 
      $defer.resolve($scope.task_data); 
 
     } 
 
    }); 
 
    });
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script> 
 
<div ng-app="main" ng-controller="DemoCtrl"> 
 
    <h1>{{items.title}}</h1> 
 
    <div class="col-md-12"> 
 
    <form role="search" class="navbar-form navbar-left"> 
 
     <div class="form-group"> 
 
     <input type="text" placeholder="Search" class="form-control search-inputbox" ng-model="tableFilter['text']" /> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <table class="table" ng-table="namingConventionParams"> 
 
    <tbody> 
 
     <tr ng-repeat="rowIndex in 0 | range : $data.length/2" ng-init="rangeSize = $data.length/2"> 
 
     <td style="word-break:break-all" data-title="items.tableHeader" align="left" filter="{ '0': 'text' }" sortable="'valueOf()'">{{$data[rowIndex]}}</td> 
 
     <td style="word-break:break-all" data-title="items.tableHeader" align="left" filter="{ '0': 'text' }" sortable="'valueOf()'">{{$data[rowIndex + rangeSize]}}</td> 
 
     </tr> 
 
    </tbody> 
 
<div>

+0

ngtable에서 공간이있는 선택 필터를 사용하는 데 문제가 있습니까? [https://stackoverflow.com/questions/31383250/how-to-have-select-filter-in-ngtable](https://stackoverflow.com/questions/31383250/how-to-have-select-filter- in-ngtable) – Ricky

-1

위의 코드는 .. 그러나 검색에 문제가 잘 작동합니다. 나에게 첫 페이지가 아닌 다른 검색 결과가 있으면 검색이 작동하지 않았다. 필터에 대한 감시를 추가하고 표를 다시로드했습니다.

$scope.$watch("tableFilter.text", function (newValue, oldValue) { 
    $scope.namingConventionParams.reload(); 
     $scope.namingConventionParams.$params.page = 1; 
    }); 
+0

검색이 실제로 작동하지만 u가 3 페이지에 있고 결과가 단 한 페이지 만 오랫동안 표시되면 u가 올바르게 표시됩니다. 이것은 대답이 아니라 개선입니다. 따라서 위의 허용 된 대답에 대한 의견이어야합니다. – cleftheris