bootstrap context menu usage (selected row in a table)

[Christophe]

Hello,

I would like to use the bootstrap context menu like it is done on this sample : http://jsfiddle.net/msurguy/PG5HU/
Actually, I want to use it for a table. For each table row the context menu could be different.
I was thinking to create a table in using  a ng-repeat="element in Array.elements" .  For each row I would like to display a context menu link to the element selected.
But I am wondering how it is possible to get the value selected in this context menu. ?!

Thanks a lot,

Christophe

[Johannes Hiemer]

Hi Christope,

something like that: http://plnkr.co/RhbDdO

I created that couple of weeks ago.

Best regards,

Johannes

[Christophe]

Hi Johannes,

I am sorry but I can't make it working ...
It does not display anything on the right click !
Does your link still alive ?

Regards
Christophe

[Johannes Hiemer]

Hi Christophe,

it is currently, as it should be "web-native", bound to the left-click. But changing it to right-click should not be a problem.

Regards

Johannes

[Christophe ROGER]

Hi Johannes,

It doesn't work in my browser. No cotext menu is displayed.

[Johannes Hiemer]

Hi Christophe,

which browser are you using?

Regards,

Johannes

[Christophe ROGER]

I tried in Chrome and Firefox.

[Johannes Hiemer]

Hi Christophe,

here are screenshots: 

Safari: http://snag.gy/4n58R.jpg

Chrome: http://snag.gy/xsxAs.jpg

Are you on G+? Maybe you could add me, and we could have a chat do sort out the problem.

Regards,

Johannes

[Christophe]

Thanks Johannes,

Acually, We think that our firewall is preventing the CSS file of your demo to be reach properly !!!

Regards,

Christophe

[Johannes Hiemer]

Hi Christophe,
That could be the issue, as those CSS files are loaded from external resources.

You could try it at home..perhaps

Regards,
Johannes

[Christophe ROGER]

Hi Johannes,

Many thanks for your plnkr.

I think it's more a javascript question, but could you give some explanations about this piece of code ? As I'm pretty new to Javascript, it looks a bit magical... 

  htmlClick = (function() {
    var handles = [], handler = function() {
      var args = arguments, self = this;
      handles.map(function(handle) {
        handle.apply(self, args);
      });
    };
    
    $('html').on('click', handler);
    
    var removeHandler = function(fn) {    
      handles = handles.filter(function(cb) { return cb !== fn; });    
      return function() { return addHandler(fn); };
    };
    var addHandler = function(fn) {      
      handles.push(fn);      
      return function() { return removeHandler(fn); };
    };
    return addHandler;
  })();

Regards,

Christophe

[Johannes Hiemer]

Hi Christophe,

been quite busy today, will get to you tomorrow. Ok?

And yes, it is just a bit Javascript specific stuff.

[Christophe ROGER]

Hi Johannes,

This time I was the busy one. It will be perfect if you have some time or links to explain that. Maybe tomorrow ?

Regards.

Christophe ROGER
christop...@gmail.com

P Please consider your environmental responsibility before printing this e-mail 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Johannes Hiemer]

Hi Christophe,

I did not forget you. But the time before christmas usually is a mess over here. Afterwards I was sick for a couple of days around new year. Today I took my time an rewrote the directive. It is now much more obvious what the directive does. You can see it here: 

http://plnkr.co/edit/RhbDdO?p=preview

Please tell me, if this fits your needs, or if you need some further explanation.

Again, excuse being that late, I hope you can still profit now.

Best regards,

Johannes

[vassilux]

Hi,

I start to play with angularjs and your code it very useful for me and works well with a static table.

I want to use with ng-repeat like follow and I can't get the context menu works.

Can you spent a little time to indicate me where is my mistake ,

<div class="row">

<div class = "span12"> 

<legend><h1>SIP</h1></legend>

<fieldset>

<div ng-repeat="peer in peersSip"> 

<span class = "span2">

<table class="status peerTable table table-bordered table-striped" width="180px" >

     <tr context="contextsip{{peer.peername}}">

     <td colspan="2" bgcolor="#DDDDDD" nowrap="nowrap"><b><span>{{peer.callerid}}</span></b>

                                        </td>

     </tr>

     <tr>

       <td width="130px" class="status{{peer.status}}" ><span >{{peer.status}}</span></td>

       <td width="60px" class="status{{peer.callstatus}}"><span  id="{{peer.peername}}-calls">{{peer.calls}}</span>call(s)</td>

     </tr>

   </table>

   <ul id="contextsip{{peer.peername}}" class="dropdown-menu">

                                    <li><a ng-click="dial()">Call</a></li>

                                    <li><a ng-click="hangup()">Hangup</a></li>

                                    <li class="devider"></li>

                                    <li><a ng-click="properties()">Properties</a></li>

                                </ul>

</span>

        

   </div>

   </fieldset>

  </div>

 

</div>

Thank for your help

[Brett McBee-Wise]

here ya go changed to right click http://plnkr.co/edit/qPL2w1?p=preview

[Keith Nicholas]

Very nice, but, when the "properties" triggers on the controller, how does the controller know what  item the properties is being done on?

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[marwaDev]

Good morning , when i clicked right the context menu  quickly disappear on firefox have you a solution ?

[Deepthi Tulluri]

Hi Johannes,

             

   i used ur example its working fn. but i have a problem with my code im nt get where im missing.

  here is my code
   

   <div data-ng-repeat="data in res">

        <div data-ng-repeat="d in data">

            <div context="context1_{{d._id}}">

                {{d.name}}

            </div>

            <ul id="context1_{{d._id}}" class="dropdown-menu">

                <li><a ng-click="edit(d.name)">Edit</a></li>

                <li><a ng-click="view()"></a></li>

            </ul>

        </div>

    </div>

This is my script code

   function testCtrl($scope){

              $scope.res={"data":[{"name":"test1","_id":0},{"name":"test2","_id":1}]};

             $scope.edit=function(name){

                 alert("hello");

             }

          }

 

Here what i need means when i click particular dropdown menu edit i want to take tht item name so im trying to make it dynamically but its nt displaying dropdown list only. Please let me know whether im doing wrong or is there any other way is there.

Thanks.

[Deepthi Tulluri]

Hi,

   After struggled alot i come to know that here the code is working like diz when it came to context directive it ll go and load the directive there we r assiging the iAttrs.context but in <ul><ul> its nt binding with data so its nt effecting there but how to call context directive after binding data.Please any one can help it may be helpful for me.

Thanks.