Question

我正在执行以下代码（来自＆＃34; AngularJS＆＃34; Brad Green＆amp; Shyam Seshadri-O＆＃39; Reilly）。下面的代码将背景颜色设置为＆＃34;红色＆＃34;，用于表格中的选定行，以及从先前选定的行中删除背景颜色。例如，如果我点击第1行，它的背景将设置为＆＃34;红色＆＃34;，然后如果我点击第2行，它的背景将被设置为＆＃34;红色＆＃ 34; 第1行的背景颜色变得正常（即它现在不是红色）。

我不清楚即使我没有编写代码来重新设置其他行的背景颜色，它是如何被重置的？

    <!-- View/Html -->
    .selected {
        background-color: red;
        }

    <table ng-controller="DynamicStyleCtrl">
        <tr ng-repeat='resturant in directory' ng-click='selectResturant($index)'
            ng-class='{selected: $index==selectedRow}'>
            <td>{{resturant.name}}</td>
            <td>{{resturant.cuisine}}</td>
        </tr>
    </table>

      <!-- Controller -->
      function DynamicStyleCtrl($scope) {
         $scope.directory = [
                        {name:'The Handsome Heifer', cusine:'BBQ'},
                        {name:'Greens', cusine:'Salads'},
                        {name:'Fine Fish', cusine:'Sea food'}
                      ];
             $scope.selectResturant = function(row){
             $scope.selectedRow=row;
           }
         }

Answer 1

以下代码将应用所选的＆＃39;当$ index ===选择行

时

ng-class='{selected: $index==selectedRow}'

因此，当选择行时（通过ng-click），该行将选择＆＃39;选择＆＃39;由于下面的CSS，它会将背景颜色设置为红色：

.selected {
  background-color: red;
}

如果因为选择了另一行而没有选择该行，则选择＆＃39;将删除通过ng-class应用的类，并且将不再应用相应的css，因此它将不再为红色。

希望这有帮助。

ng-class行为不明确

1 个答案: