Angularjs: нг-класс не поднимая класс

Вот кодAngularjs: нг-класс не поднимая класс

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

Я не вижу видимые или невидимые добавляться в класс, могу я знаю, что это вопросы

источник

2014-02-17 Madhu

Двойные фигурные скобки для строк. Попробуйте с одиночными завитушками – domokun

Нельзя использовать интерполяцию строк в ng-классе ({{ ... }});

Этот синтаксис должен работать:

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

Но лучший подход (ИМО) будет установлен стили invisible класса как стили этого элемента по умолчанию и применять только visible класса переписывает.

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

Это даст вам более красивый код.

источник

2014-02-17 11:32:05

Я думаю, что в вашем случае лучше использовать директиву нг-шоу или нг-если:

<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;">

источник

2014-02-17 11:35:54 Goodnickoff

Что делать, если 'visible' /' invisible' не только отвечает за показ элемента, но и за что-то большее? –

Я предполагаю, что для чего-то большего вам лучше использовать другое имя класса. – Goodnickoff

«Что-то еще» Я имею в виду нечто большее, чем 'display: none' –

Почему бы вам не попробовать это. Это будет работать.

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

или Это:

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

источник

2014-02-17 11:36:19 AngularHarsh

Angularjs: нг-класс не поднимая класс

ответ

Смежные вопросы