如何在ng-repeat使用的数组的每一行上将字段设置为false？

Question

I have this code for a table:

<table>
   <tr data-ng-class="{clicked: row.current == true}"
       data-ng-click="grid.view.forEach(function(object) { object.current = false; }); row.current = true"
       data-ng-repeat="row in grid.view = (grid.data | filter:isInRange">
   <td>{{ row.id }}</td>
   <td>{{ row.current }}

I am getting a syntax error on the ng-click row. I'm not sure if I am using the correct syntax. What I have is that each row of the array contains fields and some objects. I want to set the field current to false for all rows and then set to true for the one I click on. If I omit the first javascript statement of the click it does not give a syntax error.

Answer 1

Define the function in your controller (or where ever else you like), then pass its name to your markup:

$scope.x = function(){
  // do some stuff
}

// in markup
<tr ng-click="x()">

I strongly recommend to abstract such things in your markup as far as possible. Will be a lot more maintainable in the future.

Answer 2

The code inside ng-click and ng-repeat are angular expressions and repectively angular repeat expressions , not arbitrary java script code. Angular expressions are a subset of JavaScript and processed by angular's $parse service. The expression syntax isn't really well documented unfortunately, but afaik and after checking parse.js in the angular source, definition of functions (the function(){ ...} part in your ng-click )) is not supported. I also think that the assignment ( = in your ng-repeat ) is not really supported.

In those cases, it is better to just call a function that is defined in the scope as pointed out in the answer by @Sprottenwels.

On a side note, rather than having a boolean flag row.current in each row, it might be simpler to have a single variable $scope.selectedRow in your scope pointing to the selected row. Your code then becomes something like:

<tr data-ng-class="{clicked: row == selectedRow}"
    data-ng-click="selectRow(row)"
    data-ng-repeat="row in grid.data | filter:isInRange">

// in the controller
$scope.selectRow = function(row) {
    $scope.selectedRow = row;
}