Манипулирование первым элементом NG-REPEAT

im довольно новый для углового и им жаль, если это вопрос о нуле. У меня есть список, созданный ng repeat, и я хочу изменить первое появление элемента, у которого атрибут участника установлен как «Y».Манипулирование первым элементом NG-REPEAT

<tr ng-repeat="player in player_history" > 
<td>....</td> 
<td>....</td> 
</tr> 


player_history = [ 
         { 
          "value" : "10", 
          "description" : "rooney" 
          "award" : "y"  
         }, 
         { 
           "value" : "7", 
           "description" : "di maria" 
           "award" : "N"  
         }, 
         { 
           "value" : "1", 
           "description" : "de gea" 
           "award" : "N"  
         }, 

         { 
           "value" : "16", 
           "description" : "carrick"  
           "award" : "Y" 
         }, 
        ];

поэтому для первого появления награды как «Y», я хочу внести некоторые изменения в этот элемент. например, отображать результаты в таблице и позволяет сделать эту конкретную запись жирным шрифтом. Я все еще новичок, поэтому вся помощь очень ценится. и спасибо вам заблаговременно.

PS: Я тоже думал по линиям, чтобы ng-repeat делал рендеринг, а затем использовал JQuery для изменения, поскольку я хотел. Он пытался, но ничего не сделал. Еще раз.

источник

2015-01-30 Vaishak P Dinesh

Посмотрите на этот ответ: HTTP: // StackOverflow .com/Ques/19635636/first-in-ngrepeat –

спасибо, но я не хочу редактировать первый элемент, просто первое появление элемента, имеющего определенный атрибут, заданный как «Y». в этом случае первым элементом оказался он, но он мог легко быть третьим, четвертым или даже n-м элементом. –

, пожалуйста, исправьте формат 'player_history'. Вам не хватает ',' после каждого из свойств объекта 'description'. А также удалите дополнительные ',' после вашего последнего объекта. –

Там может быть много способов, но то, что я здесь получаю индекс первого y, а затем проверить его в то время как ng-repeat чтобы отметить этот элемент определенным классом, используя ng-class. Вот что работал для меня,

HTML:

<table ng-controller="PlayerController"> 
    <tr ng-repeat="player in player_history"> 
     <td ng-class="(player.award=='y' || player.award=='Y') && $index == firstYFound ? 'firstY' : 'restAll'">{{player.description}}</td> 
    </tr> 
</table>

AngularJs:

data = [ 
    { 
     "value": "10", 
     "description": "rooney", 
     "award": "N" 
    }, 
    { 
     "value": "7", 
     "description": "di maria", 
     "award": "N" 
    }, 
    { 
     "value": "1", 
     "description": "de gea", 
     "award": "N" 
    }, 
    { 
     "value": "16", 
     "description": "carrick", 
     "award": "Y" 
    } 
]; 

function PlayerController($scope){ 
    $scope.player_history = data; 
    for(var i = 0; i < $scope.player_history.length; i++){ 
     if($scope.player_history[i].award.toLowerCase() == "y"){ 
      $scope.firstYFound = i; 
      break; 
     } 
    } 
}

jsFiddle

источник

2015-01-30 08:15:55

wow. это выглядит красиво. Благодарю. поэтому предположим вместо выделения, мы могли бы скрыть или показать эту строку в зависимости от первого появления «Y», да? например, с помощью jquery? –

В этом случае используйте 'ng-hide' или' ng-show'. –

Использовать значение 'award' как имя класса.

<tr ng-repeat="player in player_history" > 
<td class = "{{player.award}}">....</td> 
<td class = "{{player.award}}">....</td> 
</tr>

и стиль их, как вам нравится в CSS.

.Y { 
    color:green; 
    } 
.N { 
    color:red; 
    }

Hop this помогает!

источник

2015-01-30 06:33:58

Если вы хотите конкретный класс для целей моделирования:

<tr ng-repeat="player in player_history" ng-class="{isY: player.award === 'Y'}" > 
    <td>....</td> 
    <td>....</td> 
</tr>

Затем вы можете применить ваш CSS более tr.isY:first-child стиль это первый diferently.

Теперь, если вам нужен совершенно другой HTML-код для этого элемента, вы должны скорее его отсортировать. Таким образом, в вашем контроллере:

for (var i = 0; i < $scope.player_history.length; i++) { 
    if ($scope.player_history[i].award === 'Y') { 
     $scope.firstYAward = $scope.player_history[i]; 
     break; 
    } 
}

, а затем в вашем HTML:

<tr ng-repeat="player in player_history"> 
    <td ng-if="player === firstYAward">.. specific html for the first Y ..</td> 
    <td ng-if="player !== firstAward"> .. regular html for the others .. </td> 
</tr>

источник

2015-01-30 06:33:59 floribon

Манипулирование первым элементом NG-REPEAT

ответ

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