AngularJS ng-点击 li 图标

Question

我有这个代码

<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 li 元素树。所以我想要有 2 次点击事件： 1. 点击 li ng-click 打开/关闭树分支 2. 点击标签 ng-click 选择树节点

li 元素具有 css 样式：

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 图像打开/关闭和标签选择节点。 现在，当您单击“li”的任何部分时，两个变量的含义都会改变。

如何拆分这些事件？ 提前谢谢...

Answer 1

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

在您的<label> 上尝试$event.stopPropagation：

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

如果要在数字左键时打开，在<li>中添加padding-left：

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
}

DEMO