Question

当我们使用静态html工作代码时，它的工作正常。但是当我们使用角度ng重复动态时，它不起作用。请对下面粘贴的代码发表您的看法。

//不工作

<div id="cssmenu" class="accordian-screen-place">
<ul style="padding:10px;">
    <li class='has-sub' ng-repeat="option in selectedItem.Option">
        <a><span class="uppercase">{{ option.name }}</span></a>
        <ul>
            <li ng-repeat="attOption in option.AttributeOption">
                <input type="checkbox" name="check" value="check1">
                <label><h3 class="h3-check">{{ attOption.name }}</h3></label>
            </li>
        </ul>
    </li>
</ul>

//工作

<div id="cssmenu" class="accordian-screen-place">
<ul style="padding:10px;">
    <li class='has-sub'>
        <a><span class="uppercase">{{ option.name }}</span></a>
        <ul>
            <li>
                <input type="checkbox" name="check" value="check1">
                <label><h3 class="h3-check">{{ attOption.name }}</h3></label>
            </li>
        </ul>
    </li>
</ul>

<script>
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function(event) {
    event.preventDefault();
    alert('sss');
    $('#cssmenu li').removeClass('active');
    $(this).closest('li').addClass('active'); 
    var checkElement = $(this).next();
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
    }
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#cssmenu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
    }
    if($(this).closest('li').find('ul').children().length == 0) {
        return true;
    } else {
        return false;   
    }     
});

Answer 1

您的代码段不起作用，因为在运行jQuery代码后，列表会以角度呈现。由于AngularJS可能决定在范围内更改某些内容时重新绘制列表项（使用ng-repeat），因此最好不要使用bind，而应使用带有3个参数的on（这是与旧jQuery版本中的live相同。除了它之外，AngularJS还有针对奇数/偶数人员的特殊指令，因此最好使用它们而不是在jQuery中编写额外的代码。经过一些修改后，您的代码可能是这样的：

Plunker：http://plnkr.co/edit/R5L5qcGtmNsUYwdvk1ow?p=preview

<强> HTML

<div id="cssmenu" class="accordian-screen-place">
  <ul style="padding:10px;">
    <li class="has-sub" ng-repeat="option in selectedItem.Option">
      <a>
        <span class="uppercase">{{ option.name }}</span>
      </a>
      <ul>
        <li ng-repeat="attOption in option.AttributeOption" ng-class-odd="'odd'" ng-class-even="'even'">
          <input type="checkbox" name="check" value="check1" />
          <label>
            <h3 class="h3-check">{{ attOption.name }}</h3>
          </label>
        </li>
      </ul>
    </li>
  </ul>
</div>

<强>的JavaScript

$(document).on('click', '#cssmenu > ul > li > a', function(event) {
    event.preventDefault();
    alert('sss');
    $('#cssmenu li').removeClass('active');
    $(this).closest('li').addClass('active'); 
    var checkElement = $(this).next();
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
    }
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#cssmenu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
    }
    if($(this).closest('li').find('ul').children().length == 0) {
        return true;
    } else {
        return false;   
    }     
});

AngularJs标签不能用于ng-repeat

1 个答案: