Question

这是代码

<body ng-app="app">

        <div ng-controller="MainCtrl" >
        <ul>
        <li ng-repeat="n in range" class="test" ng-class="{{($index < 5) && 'visible' || 'invisible' }}" style="display:inline;">
        <a href ="#">{{n.number}}</a>
       </li>
      </ul>
    </div>

</body>

角度代码

var app=angular.module('app',[]);

app.controller('MainCtrl',function($scope){
    $scope.range= [
{number: "1"},
{number: "2"},
{number: "3"},
{number: "4"},
{number: "5"},
{number: "6"},
{number: "7"},
{number: "8"}
];
});

我没有看到有意或无形的添加到课堂上，我可能知道什么是问题

Answer 1

您不应在ng-class（{{ ... }}）;

中使用字符串插值

此语法应该有效：

 ng-class="{ visible : ($index < 5), invisible : ($index >= 5) }"

但更好的方法（IMO）会将invisible类中的样式设置为该元素的默认样式，并仅应用visible类覆盖。

 ng-class="{ visible : $index < 5 }"

这将为您提供更清晰的代码。

Answer 2

为什么不试试这个。它会起作用。

ng-class = {($index < 5) ? 'visible' : 'invisible'}

或者这个：

ng-class = {visible: (index<5)}

Answer 3

我认为在你的情况下，最好使用指令ng-show或ng-if：

<li ng-repeat="n in range" ng-if="$index < 5" style="display:inline;">

或

<li ng-repeat="n in range" ng-show="$index < 5" style="display:inline;">

Angularjs：ng-class没有上课

3 个答案: