跨ng-repeat共享的$ scope变量

Question

I have the following html

<section class="result" ng-repeat="record in results | orderBy: sortRecordByTimestamp" ng-init="highlights(record)" ng-class="level">
          <!-- some stuff -->
</section>

My scope has $scope.level = '' on init. Functions are:

function highlights(record) {

  // will contain more logic
  console.log('Highlighting...');
  level(record);

}

and

function level(record) {

  $scope.spreadsheet.forEach(function(row) {
    if (row.Name.indexOf(record.event) > -1) {
      $scope.level = 'level' + row.Level;
    }
  });

}

It correctly sets the $scope.level like it is supposed to, however, it is shared across all my results.

Isn't ng-repeat creating child scopes, with primitives being overwritten?

EDIT:

Changed the html:

<section class="result" ng-repeat="record in results | orderBy: sortRecordByTimestamp" ng-class="level(record)">
  <!-- code -->
</section>

and the js:

$scope.level = function(record) {

  $scope.spreadsheet.forEach(function(row) {
    if (row.Name.indexOf(record.event) > -1) {
      console.log('Highlighting: level' + row.Level);
      return 'level' + row.Level;
    }
  });

}

It is logging correct values, however, ng-class is never set. Why?

EDIT 2:

To clarify what I am trying to do:

$scope.spreadsheet contains data to compare to record data. Match can be found in 3 instances, each enumerated in row.Level depending on row.Name . So level(record) returns a css class of level1 , level2 or level3 .

These have a background: /* color */ property set to them. So each row that has record.event found in the row.Name (they don't match exactly, that's why no === ) is colored based on which level of importance it is given.

The first time I tried to make the child scopes inherit the $scope.level property and determine it on element creation (that's why ng-init ), then I made $scope.level a function that returns the level. However, it fires on ALL records with the result of the last iteration.

How do I make determining the level separate for each record?

Answer 1

ng-repeat doesn't create an isolated scope, it does create an child scope which is prototypically inherited from its parent scope. If you look at ng-repeat API you will found that ng-repeat directive has scope: true in it, which is responsible for creating prototypically inherited scope.

To access the property of parent scope inside child scope, you should have declared object type, so that as per dot rule you could access its child properties inside child. If you are using primitive types then you should have mention $parent. to get access to parent scope variable.

There are various way provided by ng-repeat API to keep track on which which element you are, $index in place on which index element you are in.

$index number iterator offset of the repeated element (0..length-1)

$first boolean true if the repeated element is first in the iterator.

$middle boolean true if the repeated element is between the first and last in the iterator.

$last boolean true if the repeated element is last in the iterator.

$even boolean true if the iterator position $index is even (otherwise false).

$odd boolean true if the iterator position $index is odd (otherwise false).

Answer 2

您可以创建一个公共控制器并在该控制器中定义一个范围变量，然后可以将公共控制器的引用提供给要获取此变量的控制器文件。