Series Hướng dẫn xây dựng ứng dụng bán hàng bằng angular js kết hợp với Rails(Phần 2)

Hi các bạn, tiếp tục bài viết trước ngày hôm nay mình sẽ cùng các bạn tiếp tục xây dựng 1 app nho nhỏ bằng angular js. Nào không nói nhiều nữa, chiến thôi nhé! Ở series này chúng ta cùng đi qua các phần như sau:

• Hoàn thiện danh sách liên kết categories
• Show danh sách các Items
• Một action nhỏ nhỏ filter về giá sản phẩm

Hoàn thiện danh sách liên kết categories

Ở Series trước chúng ta đã show ra đc list danh mục thông qua box link đúng k nào, nhưng chưa mở được các categories con trong đấy đâu nhé. điều cần làm là

        <div class="panel-group category-products" id="accordian" ng-init="vm.initCategories(<%= @categories.to_json %>)">
              <div class="panel panel-default" ng-repeat="category in vm.categories">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordian" href="#{{category.name}}">
                      <span class="badge pull-right" ng-show="category.child.length != 0"><i class="fa fa-plus"></i></span>
                      {{category.name}}
                    </a>
                  </h4>
                </div>
                <div id="{{category.name}}" class="panel-collapse collapse">
                  <div class="panel-body">
                    <ul ng-repeat="child in category.child">
                      <li><a href="/categories/{{child.id}}">{{child.name}}</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

phân tích đoạn code nhỏ nhỏ này chúng ta có thể thấy được:

• Để ý ng-show="category.child.length != 0 trong cặp nháy đôi là một biểu thức hoặc giá trị mang tính true false.
• Trong thư viện js trong template đã xây dựng sẵn cho chúng ta đoạn để đóng mở các categories con, nên việc hiệu chỉnh href categries cha và id của categories con là cần thiết.
• Vì trong angular gọi chủ yếu thông qua các đối tượng nên mình sẽ phải làm cách nào đó để map các categories con và cha đồng bộ cùng nhau, code:

scope :with_child_limit,-> limt_number do
    limit(limt_number).map do |category|
      child = category.child
      category = category.attributes
      category[:child] = child
      category
    end
  end

Vậy. Tới đây là chúng ta đã xong phần hoàn thành danh sách liên kết categories rồi nhé. Chúng ta sẽ tiếp tục sang phần khác.

Show danh sách các Items

Cũng như việc show danh sách các danh mục thì hiển thị danh sách items cũng vậy nên mình tiến hành lấy limit 6 items mới nhất để show trên một trang.

app/controllers/dashboard_controller.rb
def index
    @top_rate_items = Item.top_rate.limit(3)
    @categories = Category.with_child_limit(10)
    @newest_items = Item.newest.limit(Settings.limit.item.newest)
end
  
app/models/item.rb
scope :newest, ->{order created_at: :desc}

app/assets/javascripts/angular/controllers/headers_controller.js
vm.initData = function(topRateItems, categories, itemNewest){
    vm.topRateItems = topRateItems;
    vm.categories = categories;
    vm.itemNewest = itemNewest;
};

Dùng ng-repeat để tiến hành lặp trong scope items

<div class="col-sm-4" ng-repeat="item in vm.itemNewest">
    <div class="product-image-wrapper">
      <div class="single-products">
        <div class="productinfo text-center">
          <img ng-src="{{item.image.url}}"/>
          <h2 ng-bind="item.price"></h2>
          <p ng-bind="item.desscription"></p>
          <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
        </div>
        <div class="product-overlay">
          <div class="overlay-content">
            <h2 ng-bind="item.price"></h2>
            <p ng-bind="item.desscription"></p>
            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
          </div>
        </div>
      </div>
      <div class="choose">
        <ul class="nav nav-pills nav-justified">
          <li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li>
          <li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li>
        </ul>
      </div>
    </div>
  </div>

Các bạn chưa vội quan tâm đến các chức năng add to wishlist or compare nhé, mình sẽ dần dần cùng các bạn xây dựng tất. ở list items này chúng ta muốn hiển thị hình ảnh thì dùng ng-src của angular js và assets phải đc precompile nhé. Noài cách gọi giá trị bằng cặp dấu {{}} chúng ta còn có thể dùng ng-bind nữa nhé. Ở trong project này mình sẽ cố gắng dùng nhiều nhất có thể những phương pháp hiển thị và xử lý data bằng angular js ^^ Hôm nay mình hơi mệt, có lẽ tới đây thôi, hẹn gặp lại các bạn ở series sau nhé.