ng-repeat中的ng-click ='selectRow（$ index）'和ng-click ='selectedRow = $ index'有什么区别

Question

myController:

$scope.items = [
{name: 'item 1', description: 'desc001'},
{name: 'item 2', description: 'desc002'},
{name: 'item 3', description: 'desc003'},]

$scope.selectRow = function (index) {
    $scope.selectedRow = index;
}

CSS:

.select {
        background-color: lightgreen;
    }

HTML 1:

<div ng-controller="myController">
<table>
<tr ng-repeat="item in items" ng-click='selectRow($index)' ng-class="{select:$index == selectedRow}">
    <td>{{item.name}}</td>
    <td>{{item.description}}</td>
</tr>
</table>

HTML 2:

<div ng-controller="myController">
<table>
<tr ng-repeat="item in items" ng-click='selectedRow = $index' ng-class="{select:$index == selectedRow}">
    <td>{{item.name}}</td>
    <td>{{item.description}}</td>
</tr>
</table>

Why the HTML-1 works but HTML-2 not work correctly? what's the different between them?

Answer 1

ng-click='selectRow($index)' will call function named selsectRow() and pass it the index of the row.

ng-class="{select:$index == selectedRow} this expression will change the name of the class of this directive based on the result of the boolean operation $index == selectedRow .