Bộ lọc tìm kiếm là một công cụ cho phép người dùng tìm kiếm dữ liệu cụ thể trong một tập dữ liệu lớn. Bộ lọc có thể được sử dụng để thu hẹp kết quả tìm kiếm bằng cách chỉ định các tiêu chí như giá trị của một trường cụ thể, phạm vi giá trị cho một trường hoặc sự hiện diện hay vắng mặt của một từ hoặc cụm từ cụ thể.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách thêm hộp nhập tìm kiếm vào ứng dụng Angular 14 để lọc dữ liệu thành một mảng. Để triển khai Bộ lọc tìm kiếm cho mảng dữ liệu đối tượng trong Angular 14, chúng tôi làm theo các bước sau

• Bước 1: Tạo ứng dụng Angular mới
• Bước 2: Cài đặt Thư viện tìm kiếm
• Bước 3: Thêm mã vào tệp App.Module.ts
• Bước 4: Thêm mã vào Xem tệp
• Bước 5: Thêm mã vào tệp app.Component ts
• Bước 6: Khởi động ứng dụng Angular

Bước 1: Tạo ứng dụng góc mới

Trước hết, hãy mở terminal của bạn và thực hiện lệnh sau trên đó để cài đặt ứng dụng góc cạnh:

ng new my-new-app

Bước 2: Cài đặt Thư viện tìm kiếm

Sau đó cài đặt thư viện ng2-search-filter và bootstrap để triển khai mảng bộ lọc tìm kiếm trong ứng dụng góc cạnh. Vì vậy, Bạn có thể cài đặt các gói bằng cách thực hiện các lệnh sau trên thiết bị đầu cuối:

npm install bootstrap

Bao gồm bootstrap css vào tệp angular.json :

...
...
    "styles": [
        "src/styles.scss",
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
...
...

Khi bạn đã tạo một ứng dụng góc cạnh mới và tham gia sâu hơn vào dự án, bạn phải cài đặt và thêm plugin ng2-search-filter vào ứng dụng góc cạnh:

$ npm i ng2-search-filter --save

Bước 3: Thêm mã vào tệp App.Module.ts

Trong bước này, hãy truy cập thư mục src/app và mở tệp app.module.ts . Và sau đó thêm các dòng sau vào tệp app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './app';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
@NgModule({
  imports: [
     BrowserModule, 
     Ng2SearchPipeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Bước 4: Thêm mã vào Xem tệp

Trong bước này, hãy tạo danh sách các mục trong ứng dụng góc cạnh. Vì vậy, hãy truy cập src/app/ và app.component.html và cập nhật đoạn mã sau vào đó:

    


    

        

            
First
            
Last
            
Address
        
    
    

        

            
{{item.firstName}}
            
{{item.lastName}}
            
{{item.address}}
        
    

Bước 5: Thêm mã vào tệp app.Component ts

Trong bước này, hãy truy cập thư mục src/app và mở app.component.ts . Sau đó thêm đoạn mã sau vào tệp component.ts:

export class AppComponent {
  term: string;
  filterData = [
    {
      firstName: 'Celestine',
      lastName: 'Schimmel',
      address: '7687 Jadon Port'
    },
    {
      firstName: 'Johan',
      lastName: 'Ziemann PhD',
      address: '156 Streich Ports'
    },
    {
      firstName: 'Lizzie',
      lastName: 'Schumm',
      address: '5203 Jordon Center'
    },
    {
      firstName: 'Gavin',
      lastName: 'Leannon',
      address: '91057 Davion Club'
    },
    {
      firstName: 'Lucious',
      lastName: 'Leuschke',
      address: '16288 Reichel Harbor'
    }
  ]
}

Bước 6: Khởi động ứng dụng góc

Trong bước này, hãy thực hiện lệnh sau trên thiết bị đầu cuối để bắt đầu dữ liệu mảng bộ lọc góc bằng cách tìm kiếm trong đầu vào:

ng serve

Giờ đây, bạn có thể triển khai bộ lọc tìm kiếm cho mảng dữ liệu đối tượng trong góc 14 với hướng dẫn từng bước ở trên.

Ở đây các trường

{
  "directory": "vendor/assets/components"
}

7 ,

{
  "directory": "vendor/assets/components"
}

8,

{
  "directory": "vendor/assets/components"
}

9,

class Application < Rails::Application
  ...
  config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
  ...
end

0,

class Application < Rails::Application
  ...
  config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
  ...
end

1 thuộc bảng

class Application < Rails::Application
  ...
  config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
  ...
end

2 để hiển thị và đáp ứng với kết quả tìm kiếm.

Đây là kết quả khi đã hoàn thiện.

II-Xây dựng khung

1.Tạo rails app

class Application < Rails::Application
  ...
  config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
  ...
end

3

class Application < Rails::Application
  ...
  config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
  ...
end

4

class Application < Rails::Application
  ...
  config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
  ...
end

5

Notes: Ruby 2.4.0dev, Rails 5.0.0.1

Chúng ta sẽ sử dụng bower để quan lý dependencies của project này. Bower là một package manager của web. Dependencies của project này bao gồm Bootstrap Framework, AngularJS, Angular-resource và Angular-route.

chạy

class Application < Rails::Application
  ...
  config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
  ...
end

6

Bower sẽ tạo một file bower.json trong root directory của project, nó sẽ hỏi vài câu hỏi như tên của project, tên của tác giả, chi tiết.... Với tên project là

class Application < Rails::Application
  ...
  config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
  ...
end

7 thì kết quả của file JSON sẽ như sau:

class Application < Rails::Application
  ...
  config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
  ...
end

8

{
  "name": "angular-search-app",
  "authors": [
    "Lim Kimhuor "
  ],
  "description": "Search with AngularJS",
  "main": "",
  "keywords": [
    "AngularJS",
    "rails"
  ],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Để dùng bower với rails app thực hiện bước sau:

• Tạo file

  class Application < Rails::Application ... config.assets.paths << Rails.root.join('vendor', 'assets', 'components') ... end

  9 trong thư mục app

{
  "directory": "vendor/assets/components"
}

• Thêm thư mục asset cho rails

  bower install bootstrap --save bower install angular --save bower install angular-route --save bower install angular-resource --save

  0

class Application < Rails::Application
  ...
  config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
  ...
end

• Tiếp theo chạy các dòng lệnh sau:

bower install bootstrap --save
bower install angular --save
bower install angular-route --save
bower install angular-resource --save

Với lệnh trên sẽ tạo required dependencies cho project trong directory

bower install bootstrap --save
bower install angular --save
bower install angular-route --save
bower install angular-resource --save

1 và lưu trong file JSON. Nên thêm

bower install bootstrap --save
bower install angular --save
bower install angular-route --save
bower install angular-resource --save

2 vào trong

bower install bootstrap --save
bower install angular --save
bower install angular-route --save
bower install angular-resource --save

3 để không phải up các thư mục đó lên repository Github.

• Thêm require cho javascript rails app

  bower install bootstrap --save bower install angular --save bower install angular-route --save bower install angular-resource --save

  4

//= require bootstrap/dist/js/bootstrap.min
//= require angular/angular.min
//= require angular-route/angular-route
//= require angular-resource/angular-resource
//= require_tree ./angular

• Phần css

  bower install bootstrap --save bower install angular --save bower install angular-route --save bower install angular-resource --save

  5

*= require bootstrap/dist/css/bootstrap.min

• Tạo model Student :

  bower install bootstrap --save bower install angular --save bower install angular-route --save bower install angular-resource --save

  6

class Application < Rails::Application
  ...
  config.assets.paths << Rails.root.join('vendor', 'assets', 'components')
  ...
end

5

• Phần định tuyến

  bower install bootstrap --save bower install angular --save bower install angular-route --save bower install angular-resource --save

  8

root "students
# index"
resources :students

• Tạo controller

  bower install bootstrap --save bower install angular --save bower install angular-route --save bower install angular-resource --save

  9

//= require bootstrap/dist/js/bootstrap.min
//= require angular/angular.min
//= require angular-route/angular-route
//= require angular-resource/angular-resource
//= require_tree ./angular

0

class StudentsController < ApplicationController
  def index
    @students = Student.all
  end
end

• Tạo View:

  //= require bootstrap/dist/js/bootstrap.min //= require angular/angular.min //= require angular-route/angular-route //= require angular-resource/angular-resource //= require_tree ./angular

  1

  

    
<%= notice %>
    

      
Students
      

        

          <%= text_field_tag :search_input, nil, placeholder: "Search..", class: "form-control" %>
        
      
    
    

      
          <% @students.each do |student| %>
            
          <% end %>
        

        

          

            
ID
            
Identity Card
            
Name
            
Date of birth
            
Place
            
Class
          
        
        

              
<%= student.id %>
              
<%= student.id_number %> 
              
<%= student.name %> 
              
<%= student.date_of_birth.strftime("%F") %> 
              
<%= student.place_birth %> 
              
<%= student.place_birth %> 
            
      
    
  

• Tạo dữ liệu để hiển thị

  //= require bootstrap/dist/js/bootstrap.min //= require angular/angular.min //= require angular-route/angular-route //= require angular-resource/angular-resource //= require_tree ./angular

  2

FactoryGirl.define do
  factory :student do
    id_number {Faker::Number.number(8)}
    name {Faker::Name.name}
    date_of_birth {Faker::Date.between(10.year.ago, Date.today)}
    place_birth {Faker::Address.street_address}
    sequence(:in_class) { |n| "DTTT-#{n}" }
  end
end

//= require bootstrap/dist/js/bootstrap.min
//= require angular/angular.min
//= require angular-route/angular-route
//= require angular-resource/angular-resource
//= require_tree ./angular

3

{
  "directory": "vendor/assets/components"
}

0

vào terminal run :

//= require bootstrap/dist/js/bootstrap.min
//= require angular/angular.min
//= require angular-route/angular-route
//= require angular-resource/angular-resource
//= require_tree ./angular

4 và

//= require bootstrap/dist/js/bootstrap.min
//= require angular/angular.min
//= require angular-route/angular-route
//= require angular-resource/angular-resource
//= require_tree ./angular

5

Kết quả hiển thị như sau

2.Khung của angularjs

//= require bootstrap/dist/js/bootstrap.min
//= require angular/angular.min
//= require angular-route/angular-route
//= require angular-resource/angular-resource
//= require_tree ./angular

6

{
  "directory": "vendor/assets/components"
}

1

• Build JSON để lấy ở phía angularjs

//= require bootstrap/dist/js/bootstrap.min
//= require angular/angular.min
//= require angular-route/angular-route
//= require angular-resource/angular-resource
//= require_tree ./angular

0

{
  "directory": "vendor/assets/components"
}

2

//= require bootstrap/dist/js/bootstrap.min
//= require angular/angular.min
//= require angular-route/angular-route
//= require angular-resource/angular-resource
//= require_tree ./angular

8

{
  "directory": "vendor/assets/components"
}

3

//= require bootstrap/dist/js/bootstrap.min
//= require angular/angular.min
//= require angular-route/angular-route
//= require angular-resource/angular-resource
//= require_tree ./angular

9

{
  "directory": "vendor/assets/components"
}

4

*= require bootstrap/dist/css/bootstrap.min

0

{
  "directory": "vendor/assets/components"
}

5

*= require bootstrap/dist/css/bootstrap.min

1

{
  "directory": "vendor/assets/components"
}

6

Kết quả của chương trình

• search theo id-card

• search theo tên

• search theo ngày năm sinh

• search theo nơi sinh

• search theo lớp học

III-Kết luận

Hy vọng bài viết này có thể giúp tăng kiến thức một chút về angularjs với một số phương thức để thực hiện với rails app. Code tham khảo : Github