2015-09-25 2 views
0

У меня есть проблема с директивой ngIf. Я попробовал много способов решить эту проблему, но, к сожалению, не удалось.AngularJS: ngIf в массиве объектов с различными свойствами

У меня есть массив объектов с различными свойствами. Что-то вроде этого:

object = [ 
    { 
     name: "1", 
     isNumber: true, 
    }, 
    { 
     name: "2", 
     isNumber: true, 
    }, 
    { 
     name: "3", 
     isNumber: true, 
    }, 
    { 
     name: "4", 
     isNumber: true, 
    }, 
    { 
     name: "5", 
     isNumber: true, 
    }, 
    { 
     name: "#", 
     isNumber: false, 
    }, 
    { 
     name: "*", 
     isNumber: false, 
    } 

Мне нужно использовать ngIf для последнего объекта с истинным значением свойства isNumber. Я не знаю, сколько объектов с isNumber в true будет в моем массиве. Это может быть 7 или 82. Никто не знает. Также объекты с isNumber на false не всегда будут в моем массиве. Иногда массив будет иметь только объекты с isNumber на true и без объектов с isNumber на false.

Как я могу достичь этого, используя ngIf?

Заранее спасибо.

UPDATE:

У меня есть что-то вроде этого:

1, 2, 3, 4, 5, 6, 7, *, #.

И я не хочу иметь кнопку «Вниз» на последнем элементе с истинным значением свойства isNumber (в этом случае 7). Потому что, если пользователь переместит его, у меня будет следующее:

1, 2, 3, 4, 5, 6, *, 7, #.

И это будет неправильная логика.

Итак, мне нужно использовать ngIf, чтобы я мог отключить эту кнопку на этом элементе. Но иногда я могу чего-л, как это (без дополнительных символов):

1, 2, 3, 4, 5.

И в этой ситуации я не нужна кнопка «вниз» на последнем элементе тоже. Потому что невозможно переместить последний элемент вниз.

+0

Не совсем уверен, что вы просите. Вы хотите, чтобы 'ng-if' проверял, является ли' isNumber' истинным ИЛИ, если это последний элемент? Можете ли вы дать еще какой-нибудь код, а также ожидаемый результат? –

+0

Я хочу проверить, является ли isNumber истинным И в то же время он должен иметь последний элемент. –

ответ

2

Если вы пытаетесь найти, если это последний элемент И если isNumber устанавливается истина, вы можете использовать это:

<span ng-repeat="item in items" ng-if="item.isNumber && $last">

$last это специальная переменная, определенная через ngRepeat, расположенный here. Поскольку ngIf принимает логическое выражение, вы можете использовать как логические операторы &&, так и ||.

Edit: если вы не итерацию над ней с ngRepeat и вы просто хотите, чтобы выбрать последний элемент, вы можете сделать что-то вроде этого, чтобы выбрать последний, а затем использовать ngIf, чтобы отобразить его, если isNumber установлен истина:

<span ng-bind="list[list.length - 1]" ng-if="list.isNumber">

Edit 2: могли бы вы «заглянуть» на следующий элемент и посмотреть, если следующий isNumber установлен в ложь?Как это:

<span ng-repeat="..."> 
    <span ng-if="!list[$index + 1].isNumber"></span> 
</span> 

Как $last, я использую специальную переменную $index, чтобы перейти к следующему элементу в ngRepeat. (не уверен, что Угловой автоматически проверяет ошибки вне очереди или может вызвать ошибку)

+0

Является ли OP 'ng-repeat'-ing над массивом? –

+0

Хм. Наверное, я просто предположил, что OP выполняет итерацию по массиву. –

+0

ngIf здесь возвращает true, если последний элемент массива будет с isNumber на true. Но что будет, если последний элемент имеет isNumber на false? Мне нужно отключить кнопку «Вниз» на последнем элементе с истинным значением свойства isNumber. Чтобы этот элемент не мог быть перемещен вниз. У меня есть что-то вроде этого: 1, 2, 3, 4, 5, #, *. И я не хочу, чтобы последний элемент (5 в этом случае) имел кнопку «Вниз», потому что я получу smth вот так: 1, 2, 3, 4, #, 5, * - это будет ошибка. –

1

Ваш первоначальный вопрос был немного запутанным, но благодаря изменениям, я думаю, я понимаю, что вам нужно. При использовании $index в сочетании с $last, вы можете добиться того, что вы хотите сделать простым способом:

<div ng-repeat="item in items"> 
    {{item.name}} 
    <button ng-if="!$last && items[$index + 1].isNumber">Down</button> 
</div> 

Объяснение

Условием для отображения кнопки вниз является !$last && items[$index + 1].isNumber. Действительно, мы должны показать кнопку, если:

  • текущий элемент не является последним: !$last
  • следующий IS номер: items[$index + 1].isNumber

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

См demo fiddle

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