AngularJS ng-单击 li 图标 [英] AngularJS ng-click on li icon

问题描述

我有这个代码

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

它的 ul li 元素树.所以我想有 2 个任何点击事件:1. 单击 li ng-click 打开/关闭树分支2. 点击标签 ng-click 选择树节点

li 元素具有 css 样式:

li {列表样式类型:无；背景重复:不重复；背景位置:左居中；}关闭{背景图片:网址(1.png)；}li.opend{背景图片:网址(2.png)；}

我想点击打开/关闭的 png 图像和选择节点的标签.现在，当您点击li"的任何部分时，两个变量都会改变它们的含义.

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

解决方案

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

在您的 上尝试 $event.stopPropagation:

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

如果你想在左键点击数字时打开，在

中添加padding-left:

li {列表样式类型:无；背景重复:不重复；背景位置:左居中；边框:1px纯白色；边框半径:5px；背景颜色:浅蓝色；padding-left: 30px;//添加填充}

演示

I have this 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>

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 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);
}

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.

Try $event.stopPropagation on your <label>:

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

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
}

DEMO

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