Angularjs: Как активировать первый ненулевой элемент в Ngrepeat? -- javascript поле с участием angularjs пол Связанный проблема

AngularJS: how to activate first non zero item in ngRepeat?


3
vote

проблема

русский

для объекта, такого как

 <код>  notification:  {   "text":0,   "image":2,   "video":0  }   

У меня есть <код> ng-repeat ввиду

 <код> <div ng-repeat="items in notification">   // contents </div>   

Как назначить «активный» класс до первого не нулевого типа уведомления внутри представления?
дополнительные
Я знаю некоторые подходы, чтобы обрабатывать его в контроллере или директивах. Я ищу способ обрабатывать его внутри зрения

Английский оригинал

For an object like

 notification:  {   "text":0,   "image":2,   "video":0  } 

I have a ng-repeat in view

<div ng-repeat="items in notification">   // contents </div> 

how to assign an 'active' class to the first non zero notification type inside view?
additional
I know some approaches to handle it in controller or directives. I'm looking for a way to handle it inside view

</div
     

Список ответов

0
 
vote
vote
Лучший ответ
 

<код> ngRepeat есть собственный объем, поэтому мы Не могу просто определить флаг в <код> ngInit и установить или очистить его, когда был найден первый ненулевой элемент. Но для решения мы можем использовать трюк с <код> $parent Свойство <Код> Scope

Так что см. Следующие фрагменты кода:

 

ngRepeat have own scope, so we can't simple define flag in ngInit and set or clear it when first non zero item was found. But for solving we can use trick with $parent property of Scope

So see next code snippets:

angular.module("app",[])  .controller("ctrl",function($scope){      $scope.notification= {          "text":0,          "image":2,          "video":1,          "a":0      };  });
.active{      color:red;  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="app" ng-controller="ctrl" ng-init="isFirst=true;">      <div ng-repeat="(k,v) in notification" ng-class="{active:isFirstActive }" ng-init="isFirstActive=$parent.isFirst&&v!=0;$parent.isFirst=$parent.isFirst&&v==0">         {{k}}:{{v}}    </div>  </div>

angular.module("app",[])  .controller("ctrl",function($scope){      $scope.notification= {          "text":0,          "image":2,          "video":1,          "a":0      };  });
.active{      color:red;  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="app" ng-controller="ctrl" >      <div ng-repeat="(k,v) in notification" ng-class="{active:isFirstActive }" ng-init="isFirstActive=!$parent.isAcivated&&v!=0;$parent.isAcivated=$parent.isAcivated||v!=0">         {{k}}:{{v}}    </div>  </div>
</div
 
 
1
 
vote
 <код> git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git # and then git fetch upstream 6  

Редактировать: спасибо Grundy для проверки того, что скрипт, я исправил его в этом jsfiddle Но новое решение выглядит сложному

 <код> git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git # and then git fetch upstream 7  
 
<div ng-repeat="(name, value) in notification" ng-class="{'active': value && hasOneActive}" ng-init="hasOneActive = hasOneActive || value;">   // contents </div> 

EDIT: thanks Grundy for checking that script, i've corrected it in this jsfiddle but the new solution looks complicated

<div ng-app="app" ng-controller="ctrl" ng-init="oldActive = false; newActive = false;">                         <div ng-repeat="(k,v) in notification" ng-class="{'active': isActive}" ng-init="$parent.oldActive = $parent.newActive; $parent.newActive = !!($parent.newActive || v);                  isActive = ($parent.newActive && !$parent.oldActive && ($index !== 0)) || ($parent.newActive && $index === 0)">          //contents     </div>  </div> 
</div
 
 
     
     

Связанный проблема

-2  Как мне получить значение флажков ряд в таблице JavaScript  ( How do i get value of a checkboxes of a row in a table javascript ) 
Это может быть глупым вопросом, но мне нужно получить значения проверенных флажков определенной строки. <код> script5 Так что в основном я хочу, чтобы по...

1  Функция валидации угловых JS Возвращает до завершения вызова API для проверки  ( Angular js validation function returns before the api call for validation is com ) 
<код> if (!validate()) { return; }; function validate() { var nameIsValid = ...

1  Если для JavaScript в XSLT не работает [дубликат]  ( If greater than javascript into xslt doesnt work ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

21  Angularjs NG-модель внутри NG-Repeat имеет плохую производительность  ( Angularjs ng model inside ng repeat has poor performance ) 
У меня проблема с производительностью с угловой в следующем сценарии: <код> <div ng-repeat="a in array"> <input ng-model="something"> </div> Я писал к...

0  Boxy Эта отправка не работает  ( Boxy this submit does not work ) 
У меня есть несколько форм в моем коде, и я хочу назначить подтверждающее поле, чтобы показать, прежде чем он будет отправлен. Следовательно, я использую Bo...

0  Почему это работает над сафари и Firefox, но не на хроме?  ( Why is this working on safari and firefox but not on chrome ) 
У меня есть адаптивное меню навигации, он работает следующим образом: при изменении размера окна появляется значок «Гамбургер» (три строки). Нажатие на этот з...

0  Нужен React Router Pro, чтобы помочь мне  ( Need a react router pro to help me ) 
Итак, сегодня я играл с маршрутизатором RACT и попытался изменить это Пример . Я хочу достичь этого: . Боковой NAV отображает только имена Когда пол...

2  Совет инструмента не работает на текстовой зоне Bootstrap  ( Tool tip not working on text area bootstrap ) 
У меня есть форма Bootstrap 3, на которой я применяю Tootip через скрипт. Toottip работает нормально на поле ввода, но не работает над Textarea. <код> <div ...

5  модальный всплывающий как Google  ( Modal pop up like google ) 
Как сделать модальное всплывающее окно, как Gmail (когда мы пытаемся загрузить EXE, который генерирует крышки прокрутки страницы) ...

0  Попытка вернуть массив объектов для просмотра, получить «10 $ digest () итераций  ( Trying to return array of objects to view get 10 digest iterations reached ) 
Я пытаюсь создать токенизатор, где пользователь вводится в форматную строку, а пользовательский интерфейс дает им предварительный просмотр анализатора. Когда ...

183  Вертикально центрирующее модальное окно Bootstrap  ( Vertically centering bootstrap modal window ) 
Я хотел бы центрировать мою модаль на ViewPort (Middle), я пытался добавить некоторые свойства CSS <код> .modal { position: fixed; top:50%; left:50%; } ...

2  Как получить выделенные тексты?  ( How to get the highlighted texts ) 
Я пытаюсь получить выбранные тексты от пользователя (выделенный текст, который выделяет пользователь). У меня есть следующее: <код> function getSelectedTe...

1  jquery адрес плагин  ( Jquery address plugin issue ) 
Я использую плагин jQuery Address, я реализовал плагин на странице списка, когда я нажимаю на одну из ссылок, функция будет вытащить данные, используя AJAX и ...

0  Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено?  ( How do you make a div go under another div nav menu which is not fixed ) 
Я пытаюсь сделать Div, идут под очередной div, в котором ни один не фиксирован элементы. Вот мой код: <Код> ul { list-style-type: none; margin: ...

0  Разрежьте строку в JavaScript [Закрыто]  ( Cut the string in javascript ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт. Этот вопрос не соответствует Рекомендациям переполнения ...