programing tip

테이블 내부의 행에 ng-repeat 및 ng-class 사용

itbloger 2020. 12. 9. 07:56
반응형

테이블 내부의 행에 ng-repeat 및 ng-class 사용


나는 AngularJS를 사용하고 있고 내가 얻고 싶은 효과는 이것이 효과가 있다고 가정하면 이것이 생성하는 것과 비슷한 것입니다 (그렇지 않습니다).

전망

<tr ng-repeat='person in people' ng-class='rowClass(person)'>
  <td>.....info about person...</td>
  <td>.....info about person...</td>
  <td>.....info about person...</td>
</tr>

제어 장치

$scope.rowClass = function(person){
  ...return some value based upon some property of person...
}

이 코드는 각 행 내의 개체에만 사용할 수 있으므로 사용할 person없기 때문에 작동하지 않는다는 것을 알고 ng-class있습니다. 코드는 내가 무엇을 하려는지에 대한 아이디어를 얻는 것입니다. ng-repeat행 자체의 범위 기능에 대한 액세스에 의존하는 조건을 기반으로하는 클래스를 사용하여 생성 된 테이블 행을 가질 수 있기를 원합니다 . person. 나는 기둥에 ng-class를 추가 할 수 있지만 지루하다는 것을 알고 있습니다. 누구든지 더 좋은 아이디어가 있습니까?


이것은 실제로 잘 작동합니다. 사람은 동일한 범위를 공유하기 때문에 tr 요소와 하위 요소에서 사용할 수 있어야합니다.

이것은 나를 위해 잘 작동하는 것 같습니다.

<table>
    <tr ng-repeat="person in people" ng-class="rowClass(person)">
        <td>{{ person.name }}</td>
    </tr>
</table>

http://jsfiddle.net/xEyJZ/


사실, 당신 당신이 말하는 문맥에서 "사람"을 사용할 있습니다. 반복되는 항목과 그 안의 모든 항목에 존재합니다. 그 이유는 특정 요소의 모든 지시문이 동일한 $ scope 개체를 공유하기 때문입니다. ng-repeat의 우선 순위는 1000이므로 이미 $ 범위를 만들고 "person"을 입력 했으므로 ng-class에서 "person"을 사용할 수 있습니다.

이 Plnkr 참조 :

http://plnkr.co/edit/ZI5Pv24U01S9dNoDulh6


일반적으로 나는 더 포괄적 인 대답을하고 싶지만 그렇게하기에는 너무 많은 코드가 포함되어 있습니다. 그래서 가장 중요한 것을 보여주고 이것을 보는 사람이 그것을 사용하는 방법을 알고 있기를 바랍니다. 내 동적 JSON 배열에는 열과 행이 모두 있지만이 비트에서 중요한 것은 ng-show = "$ last"입니다. 동적 JSON 배열의 마지막 행만 표시해야합니다.

<tr ng-repeat="row in table.rows" ng-show="$last">

   <td ng-repeat="column in table.cols" ng-show="column.visible == true" nowrap >{{row[column.columnname]}}</td>
</tr>

참고 URL : https://stackoverflow.com/questions/15410652/using-ng-repeat-and-ng-class-on-rows-inside-a-table

반응형