Question

我有一个移动导航指令，可以在点击时切换<ul>。

该指令运作良好;但是，当我使用一个类时，但是当我切换到ng-class时，我不再能够使用jquery来定位该类。

这是我的模板。

<ul ng-repeat="list in englishList">

<a ng-class="{{list.title}}Hide" mobile-search-slide href="/about"><li><p>{{list.title}}</p><i class="fa fa-chevron-right"></i></li></a>

<ul id="hideMe" ng-class="hideAbout">           
<div ng-cloak ng-repeat="(key, value) in searchData | aboutFilter:'abo'">

 <div ng-repeat="result in value" ng-class-odd="'odd'" ng-class-even="'even'">
   <a ng-href="{{value.title}}/{{result.shortname}}">
   <li><p>{{result.title}}</p><i class="fa fa-chevron-right"></i></li>

   </a>
   </div>  
</div> 
</li>
</ul>

 </ul>

此行有类，我想定位：

<ul id="hideMe" ng-class="hideAbout">

这是mobile-search-slide指令：

app.directive('mobileSearchSlide', function(){
return{
  restrict: "A",
  link: function(scope, element, attrs) {
      element.click(function(){

        $('.hideAbout').slideToggle();

        console.log(element);
      });

    }
}
});

我计划将ng-class用作<ul id="hideMe" ng-class="hide{{list.title}}">

Answer 1

ng-class期望表达式作为参数值。只需像使用'hideAbout'一样使用ng-class-odd：

<div ng-repeat="result in value" ng-class-odd="'odd'" ng-class-even="'even'">

Answer 2

由于hideAbout是类名，因此您只需使用class="hideAbout"

即可

就ng-class而言：

<ul id="hideMe" ng-class="{'className'  : expression}">

它需要classname和表达式。

所以你的语法不正确，所以ng-class无法添加类名。

否则只需使用ng-class="'hideAbout'"此处hideAbout在引号内，因此它将被视为字符串。

更新：

<ul id="hideMe" ng-class="hide{{list.title}}">它应该如下所示：

<ul id="hideMe" ng-class="'hide ' +list.title">

或

<ul id="hideMe" class="hide {{list.title}}">

样本

ul.hide.s4 {
  width: 400px;
  height: 100px;
  background: red;
}

<!DOCTYPE html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<ul id="hideMe" ng-class="'hide ' +'s'+4">
</ul>
</body>
</html>

Angular.js针对dom操作的ng-class

2 个答案: