Выделите выделенную строку в ng-repeat с логикой только в HTML

Question

Выделите выделенную строку в ng-repeat с логикой только в HTML

0

Это вопрос о том, как выделить выделенную строку в ngRepeat?

Здесь строка подсвечивается с использованием функции, определенной в контроллере. Мне хотелось сделать наоборот, где я хочу использовать только код в HTML. Ниже мой плункер, который я пробовал. Plunker Pls поделится своими мыслями по этому вопросу:

<tr ng-repeat="item in items" 
         ng-init="selectedRow = null"
          ng-class="{'selected':selectedRow == $index}" 
          ng-click="selectedRow=$index" ></tr>

forgottofly 30 сен. 2015, в 17:08

Источник

Теги:

javascript

angularjs

angularjs-ng-click

ng-repeat

4 ответа

1

Если вы хотите обработать вышеописанное условие с помощью CSS, используйте флажок angularJS ng-class-even и ng-class-odd.

Таким образом, при выполнении обоих будет отображаться, но любой из них только придет в действие.

user5413346 06 окт. 2015, в 07:46

0

Хорошо объясните, пожалуйста, добавьте пример или любую ссылку PLNK с ответами, это сделает понятным.
Chetan Sharma 06 окт. 2015, в 09:47

1

Ваша проблема: ng-repeat создаст свою собственную дочернюю область для каждой итерации, которая имеет свою собственную selectedRow переменную Row. Поэтому, когда вы нажимаете кнопку, она активирует класс, но не удаляется, так как следующая строка задает другой экземпляр selectedRow переменной Row.

Вы можете либо ссылаться на selectedRow на $parent.selectedRow либо на реструктуризацию своей $scope чтобы открыть свойство, к которому вы привязываетесь. последний обходит проблему, о которой сообщают некоторые люди, используя ng-model непосредственно из области.

$scope.model = {
    items: [],
    selectedRow: 0
}

ste2425 30 сен. 2015, в 13:21

0

Мне понравилось, как ты это объяснил
Chetan Sharma 08 окт. 2015, в 14:02

1

Пожалуйста, возьмите идею из приведенного ниже примера:

Используйте ng-class-odd и ng-class-even

<ol ng-init = "names = ['John', 'Mary', 'Cate', 'Suz']">

<li ng-repeat = "name in names">

<span ng-class-odd = "'odd'" ng-class-even = "'even'">

{{имя}}

</SPAN>

</Li>

</Ол>

Chetan Sharma 30 сен. 2015, в 12:52

0

ng-repeat можно использовать с любым HTML, для которого разработчик хочет повторить его
Chetan Sharma 08 окт. 2015, в 14:01

Ещё вопросы

Хорошо объясните, пожалуйста, добавьте пример или любую ссылку PLNK с ответами, это сделает понятным.
Мне понравилось, как ты это объяснил
ng-repeat можно использовать с любым HTML, для которого разработчик хочет повторить его

Shamal Perera · Accepted Answer · 2015-09-30T12-34-00.000Z

Взгляните на эту демонстрацию

<tr ng-repeat="item in items" 
         ng-init="selectedRow = null"
          ng-class="{'selected':$parent.selectedRow == $index}" 
          ng-click="$parent.selectedRow=$index" >
          <td>{{item.name}}</td>
          <td>{{item.value}}</td>
           <td><button class="btn btn-primary" ng-click="edit(item)">Click</button></td>

</tr>

function ListCtrl($scope, $dialog) {

  $scope.items = [
    {name: 'foo', value: 'foo value',car:'chevy',model:'vette',year:'2013'},
    {name: 'bar', value: 'bar value'},
    {name: 'baz', value: 'baz value'}
  ];

 $scope.selected = -1;


}