1. 程式人生 > >Angularjs中table中實現點選td中按鈕不觸發tr的點選事件

Angularjs中table中實現點選td中按鈕不觸發tr的點選事件

今天遇到個問題:

1、在table中,每一行有個checkbox,tr上設定了ng-click;

2、每一行最後又有一個按鈕【詳情】,按鈕使用ui-sref設定了點選事件;

3、現在出現的問題是:點選【詳情】按鈕,同樣會觸發ng-click事件,即將複選框checkbox勾選上

經過網上查詢和嘗試,最後解決方案為:

1、將按鈕的ui-sref換成ng-click;

2、在ng-click的方法中實現state的跳轉,方法的傳入引數增加$event;

3、使用angularjs的阻止冒泡方法$event.stopPropagation(),使點選事件不再派送。

在網上具體瞭解了下stopPropagation()方法,它的具體作用為:終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。呼叫該方法後,該節點上處理該事件的處理程式將被呼叫,事件不再被分派到其他節點

具體click方法如下:

function viewDetail(date,$event) {
    $state.go("state.view",{
        param1:date.param1,
        param2:date.param1
});
    $event.stopPropagation();//阻止冒泡
}
button的設定:
<button ng-click="vm.viewDetail({param1:obj.param1,param1:obj.param2},$event)" type="submit" class="btn btn-primary btn-sm"
> <span class="glyphicon glyphicon-eye-open"></span> <span class="hidden-xs hidden-sm" data-translate="entity.action.view"></span> </button>

相關推薦

Angularjstable實現td按鈕觸發tr事件

今天遇到個問題: 1、在table中,每一行有個checkbox,tr上設定了ng-click; 2、每一行最後又有一個按鈕【詳情】,按鈕使用ui-sref設定了點選事件; 3、現在出現的問題是:點選【詳情】按鈕,同樣會觸發ng-click事件,即將複選框checkbox勾

luatable實現

ron 執行 post 常用 什麽 pos 使用 ring table table 在lua中是一個非常常用的數據結構,可以用來存放各種類型的元素,那麽就會讓人好奇,它這麽強大,它是用什麽數據結構實現的呢 首先,考慮 table = {1, 2, 3, 4, 5, 6, 7

Jsp table 使用實現各行3個,之後自動換行

<table class="table quick-detail" id="J-quick-detail"> <tbody><tr><c:forEach items="${attrs }" var="att" varStatus="status"><td

按鈕觸發輸入框失去焦點事件

例項圖描述:模具號、機臺號輸入方式有兩種:手動輸入(失焦校驗)和掃描錄入(錄入後校驗) <li class="aui-list-item"> <div class="aui-list-item-inner"> <div clas

div和內部的a標籤都有click事件a觸發div的click事件

  <div> <a></a> </div> $("a").click(function(){ event.stopPropagation(); }) 詳情見: https://blog.csdn.net/u0

easyui datebox控制元件今天按鈕觸發onSelect事件的解決方法

在onSelect事件之前新增 onHidePanel事件 $(function () { //開始時間 $('#{$namespace}QueryDate').datebox({ onHidePanel : func

asp.net 伺服器按鈕 觸發後臺事件解決方法

前兩天在做專案的時候在上傳按鈕前,做了其他的操作,發現在點選上傳按鈕沒有觸發後臺的提交事件。點選沒有任何的反應。 真是奇怪。 檢視程式碼也沒有什麼異常。 後來查了查原來是code-behind提交失效!失效的原因我是沒有搞清楚,期望大家多交流。 那我得解決這個問題呀,後

aspx的asp:LinkButton控制元件在js呼叫觸發後臺處理程式

 var conswich = '0';         function clientConfirm(thisbutton) {             var payment =  $('#<%=RealPayment.ClientID%>');             console.lo

重寫radio單框選中按鈕然後觸發其他事件

首先編寫下面日期資訊 對應的程式碼如下 <input type="hidden" name="fdLoop" id="fdLoop" value="3" />&nbsp;       <input type="radio" name="rdL

JQuery實現滑鼠滑動多次,只觸發一次響應事件

正常在設定滑鼠滾輪事件的時候,一次滾動對應一次響應事件。但是按照使用者習慣,使用者一次滑動滑鼠滾輪的動作中,可能實際上滑鼠滾輪滾動了多次(通俗的講,就是使用者不會一下一下的滑動滾輪)。這樣實際上觸發了多次滾輪響應事件,無法達到理想中,使用者滑動一次滾輪,只產生一個動作的效果,

實現element-uitable一行展開

轉:https://www.jianshu.com/p/e51ba4cb11d6 先上效果   效果圖 三要素 1、row-click 點選行 2、ref 自行了解vue 3

Vue-cli使用vConsole,以及設定JS連續控制vConsole按鈕顯隱功能實現

一、vue-cli腳手架中搭建的專案引入vConsole除錯 1.首先npm安裝,大家都懂的。 npm install vconsole 2.在合適的地方新建一個檔案vconsole.js,內容如下: import Vconsole from 'vconsole' let vConso

td通過button繫結click事件實現跳轉,以及獲取同一table另一td的值

1、通過button繫結事件跳轉到同一頁面的其他div 例: js頁面 <table id = "tableid"> <tr> <td id = "rcode">"123456"</td> <td><butto

AndroidFragment+Viewpager實現左右滑動和

一.佈局檔案 <?xml version="1.0" encoding="utf-8"?> <android.support.v4.view.ViewPager android:id="@+id/viewpager" andr

textview中點效果實現,比如textview實現圖片和文字的顏色變化(類似於button)

<TextView android:drawableTop="@drawable/bg_text_view" android:id="@+id/home_toolbar_settings" an

實現 WebView 的圖片,呼叫原生控制元件展示圖片

現在有很多時候,我們的 App 都進行了混合開發,而最簡單,最常用的就是有些網頁採用了 WebView 進行展示,這就需要我們瞭解和懂得如何實現 WebView 和 JS 進行互動。今天我們就來學習一下,如何點選 WebView 中的網頁圖片,呼叫原生控制元件進行放大展示。

Android按鈕的水波紋效果的實現

關於按鈕水波紋的點選效果,這個是我在http://blog.csdn.net/singwhatiwanna/article/details/42614953這篇文章讀到的。寫得真心不錯,我只是站在巨人的肩上而已。 我加了一些註釋,以至於我們更好的理解這篇不錯的文章 下面是主

JS互動 WKWebView的圖片實現預覽效果

Swift 4.0 WKWebView 1.注入js程式碼 (重點) func webView(_ webView: WKWebView, didFinish navigation: W

iframe 某頁面的一個按鈕實現跳轉到iframe外面的窗體裡面

Default.aspx protected void Page_Load(object sender, EventArgs e) { Response.Redirect("WebForm1.aspx"); }

C++實現WebBrowser控制元件對滑鼠事件的監聽,並獲取所標籤的超連結

        主要步驟如下:         1、接收網頁事件(參考資料) 要響應網頁事件,需要實現IDispatch介面,並在其Invoke()方法中處理收到的訊息。對於MFC,因為CCmdTarget類已經實現了該介面,所以只需要繼承CCmdTarget並結合相關巨