Question

我已经制作了一张列表卡，每行有2个图标。如何在不丢失列表布局的情况下使图标可以点击？我试图给图标元素点击一次，但它不起作用。如果我用div包围他们，我就会失去列表的布局。

Started POST "/orders" for 127.0.0.1 at 2015-04-28 21:54:52 -0400
Processing by OrdersController#create as HTML
Parameters: {"utf8"=>"√",     
 "authenticity_token"=>"jYKMts1Zwgl4a0Y+ud86J3mAh0rGHuDqW0rUqSm45NQ=", 
"order"=>{"name"=>"dddd"}, "commit"=>"Place Order"}
 User Load (1.0ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = 1  
ORDER BY "users"."id" ASC LIMIT 1
Cart Load (0.0ms)  SELECT  "carts".* FROM "carts"  WHERE "carts"."id" = ?
 LIMIT 1  [["id", 3]]
 LineItem Load (0.0ms)  SELECT "line_items".* FROM "line_items"  WHERE  
"line_items"."cart_id" = ?  [["cart_id", 3]]
 (0.0ms)  SELECT "accounts"."acctbal" FROM "accounts"  WHERE  
"accounts"."user_id" = 1  ORDER BY "accounts"."created_at" ASC
Menu Load (0.0ms)  SELECT  "menus".* FROM "menus"  WHERE "menus"."id" = ?  
 LIMIT 1  [["id", 1]]
(0.0ms)  begin transaction
(0.0ms)  rollback transaction
(0.0ms)  begin transaction
 SQL (0.0ms)  INSERT INTO "orders" ("address", "created_at", "email",  
 "name", "updated_at") VALUES (?, ?, ?, ?, ?)  [["address", "3494 dsfsdf dr.
  valdosta, GA 31504"], ["created_at", "2015-04-29 01:54:52.414099"],
 ["email", "parent@example.com"], ["name", "dddd"], ["updated_at", "2015-04-
  29 01:54:52.414099"]]
 SQL (1.0ms)  UPDATE "line_items" SET "cart_id" = ?, "order_id" = ?,  
 "updated_at" = ? WHERE "line_items"."id" = 3  [["cart_id", nil], 
 ["order_id", 3], ["updated_at", "2015-04-29 01:54:52.417100"]]
(93.0ms)  commit transaction
Cart Load (0.0ms)  SELECT  "carts".* FROM "carts"  WHERE "carts"."id" = ? 
LIMIT 1  [["id", 3]]
(0.0ms)  begin transaction
LineItem Load (0.0ms)  SELECT "line_items".* FROM "line_items"  WHERE
"line_items"."cart_id" = ?  [["cart_id", 3]]
SQL (0.0ms)  DELETE FROM "carts" WHERE "carts"."id" = ?  [["id", 3]]
(83.0ms)  commit transaction
 Redirected to http://localhost:3000/
 Completed 302 Found in 238ms (ActiveRecord: 178.0ms)


 Started GET "/" for 127.0.0.1 at 2015-04-28 21:54:52 -0400
 Processing by StoreController#index as HTML
(0.0ms)  begin transaction
 SQL (1.0ms)  INSERT INTO "carts" ("created_at", "updated_at") VALUES (?, ?)  
 [["created_at", "2015-04-29 01:54:52.632112"], ["updated_at", "2015-04-
 29 01:54:52.632112"]]
(76.0ms)  commit transaction
 Rendered store/index.html.erb within layouts/application (5.0ms)
 User Load (0.0ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = 1  
 ORDER BY "users"."id" ASC LIMIT 1
 Completed 200 OK in 1109ms (Views: 1028.1ms | ActiveRecord: 77.0ms)

我想保持这个布局左右两个图标：

layout

Answer 1

将您的link标记转换为div标记，并且您的i标记应为链接标记。为图标添加一点css。很高兴。

（Demo）

HTML

<div class="list card">
    <div ng-repeat="destination in destinations | isActive">
        <div class="item item-divider">
            <span>{{title}}</span>
        </div>
        <div class="item item-icon-left item-icon-right item-balanced">
            <a href="#" class="icon ion-ios-home"></a>
            <div>
                <div>{{text1}}</div>
                <div><b>{{text2}}</b>
                </div>
                <div>{{text3()}}</div>
                <div>{{text4()}}</div>
            </div>
            <a href="" class="icon ion-ios-filing"></a>
        </div>
    </div>
</div>

CSS

.icon {
    color: inherit;
    text-decoration: none;
}

Answer 2

离子3

<ion-card class="border-top" (click)="eventDetail(event.id)">
        <ion-card-content>
          <ion-card-title>
            {{ event.title }} <ion-badge color="primary"> {{ event.date | date : "MMMM d, yyyy - HH:mm"}}</ion-badge>
          </ion-card-title>
          <p>
            {{ event.description }}
          </p>
        </ion-card-content>
      </ion-card>

其中eventDetail是相应类中的函数，eventId是您要传递的值。

离子可点击的项目图标

2 个答案: