Question

我想替代<li>

    <ul ng-class-even="'even''">
     <li>
         <span>foo Span even</span>
         <p>foo p even</p>
     </li>
     <li>
         <span>foo span odd</span>
         <p>foo p odd</p>
      </li>
 </ul>

我希望每个偶数<li>标记都能获得样式。我试过这样的事情，但很明显它不会起作用。

Answer 1

li { background: green; }
li:nth-child(odd) { background: red; }

> https://stackoverflow.com/questions/5080699/using-css-even-and-odd-pseudo-classes-with-list-items

Answer 2

我认为你可以在这种情况下使用指令，如果你严格要使用angularjs，否则css也可以满足

 <ul foo-directive odd-class='odd' even-class ='even'>
 <li>
     <span>foo Span even</span>
     <p>foo p even</p>
 </li>
 <li>
     <span>foo span odd</span>
     <p>foo p odd</p>
  </li>
</ul>

和指令就像

    app.directive('fooDirective',function(){

        return {
            restirct:'EA',
            link:function(scope,element,attr){

                for (var i = 0; i < element[0].children.length; i++) {
                        if(i % 2 == 0)
                        element[0].children[i].className = attr.evenClass
                        else
                        element[0].children[i].className = attr.oddClass
                    }
            }

        }

    })

在没有ng-repeat的角度中交替使用样式<ul>元素

2 个答案: