李图标AngularJS纳克点击 [英] AngularJS ng-click on li icon

问题描述

我有这样的code

<div  ng-repeat="names in mitypes  = (mitype | filter:{parentid:0}:true)"> 

    <li ng-click="newObject[names.id]=!newObject[names.id]">
      <label ng-click="selectedlist[names.id]=!selectedlist[names.id]">{{names.id}}  </label>
    </li>

    </div>
   </div>

其UL李元素的树。所以我想有2个点击任何事件：
1.单击李NG-点击打开/关闭树枝
对于选择树节点2.单击标签NG-点击

Its tree of ul li elements. So i want to have 2 any event of click: 1. Click li ng-click for open/close tree branch 2. Click label ng-click for select tree node

li元素有CSS样式：

li element have css style:

li {
  list-style-type: none; 
  background-repeat: no-repeat;
  background-position: left center;
}
li.closed
{
  background-image: url(1.png);
}
li.opend
{
  background-image: url(2.png);
}

我想点击的开/关和标签选择节点png图片。
现在，当你点击礼这两个变量改变其含义的任何部分。

I want click on png image for open/close and label for select node. Now, when you click on any part of the "li" both variables change their meaning.

我怎么可以拆分这些事件？
在此先感谢...

How can I split these events? thanks in advance...

推荐答案

这是在浏览器的标准事件传播行为。

This is standard event propagation behavior in browsers.

尝试 $ event.stopPropagation 在＆LT;标签＆gt; ：

<label ng-click="selectedlist[names.id]=!selectedlist[names.id]; $event.stopPropagation()">{{names.id}}  </label>

如果您旺旺单击$留在号码时打开，添加填充左到＆LT;立GT; ：

If you want want to open when clicking left at the number, add padding-left to <li>:

li {
 list-style-type: none; 
 background-repeat: no-repeat;
 background-position: left center;
 border: 1px solid white;
 border-radius:5px;
 background-color:lightblue;
 padding-left: 30px; //add padding
}

演示

这篇关于李图标AngularJS纳克点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！