Angularjs 如果被呼叫次数过多，则为ng

我正试图根据所选类别过滤一些频道

我在频道中有一个ng重复的

频道，它有一个
ng if=“hascegory（channel.category）

文件如下：

db.channels.find().pretty()
{
    "_id" : "2kj9GK8jE9yHezoWb",
    "name" : "example name",
    "logo" : "path/to/image.svg",
    "number" : 2,
    "category" : [
        "Broadcast",
        "Premium"
    ],
    "tags" : "example tag tags"
}

这是处理ng的函数，如果：

$scope.hasCategory = function (categoryNameArray) {
  console.log('thisisbeingcalled');
  var e = _.indexOf(categoryNameArray, $scope.activeCategory);
  if (e === -1) {
    return false;
  } else {
    return true;
  }
};

这就是我设置活动类别的方式：

$scope.setCategory = function (name) {
  $scope.activeCategory = name;
};

我通过单击视图中的按钮发送：

<section layout="row" layout-align="center center" layout-wrap ng-init="activeIndex; activeCategory">
  <md-button flex="auto" flex-sm="45" flex-xs="100" ng-repeat="kit in kits | orderBy: 'order'" ng-class="{active: (activeIndex.index == $index)}" class="md-raised">
    <a href="" ng-click="activeIndex.index = $index; setCategory(kit.name);" class="bold">{{kit.name}}</a>
  </md-button>
</section>

现在我只有一个通道来测试这一点，但每次我单击按钮更改类别时，
$scope.hascegory
函数会被多次调用，即使在页面启动时（第一次加载）


我也有一个搜索栏来搜索当前类别中的频道，我不确定这是否也会影响到这一点

<input type="text" ng-model="queryname" ng-model-options="{debounce: 500}">

您的
ng if
将在每个摘要循环上被调用。问题是它包含一个涉及函数调用的表达式。Angular无法知道表达式的结果何时可能更改，因此它每次都会调用它

更好的选择是在每个通道中设置一个标志，并使用ng if仅测试相关标志。然后只要在
$scope.activeCategory
发生更改时更新标志，您可以在设置类别的代码中进行更改，也可以使用
$scope.$watch（）
自动触发它

e、 g

$scope.setCategory=函数（名称）{
$scope.activeCategory=名称；
对于（var index=0；index<$scope.channels.length；index++）{
$scope.channels[index].hascegory=hascegory（$scope.channels[index].category，name）；
}
};
函数hasCategory（categoryNameArray，名称）{
log（'thisisbeingcalled'）；
变量e=uxof.indexOf（categoryNameArray，名称）；
如果（e==-1）{
返回false；
}否则{
返回true；
}
}

然后在模板中：

<md-card flex="15" flex-xs="40" class="slide-up" layout="column"
    ng-repeat="channel in channels | orderBy: 'number' | filter: queryname"
    ng-if="channel.hasCategory"
    ng-init="channel.edit = false">
  <md-card-header ng-show="channel.edit == false">
    <img ng-src="{{channel.logo}}" alt="">
  </md-card-header>
  <md-card-header-text ng-show="channel.edit == false">
    <span class="md-subhead dark-blue" layout="row" layout-align="center" layout-margin>{{channel.number}}</span>
  </md-card-header-text>
</md-card>


{{channel.number}

应该更高效。
ahh，非常感谢！我对您的代码做了一些调整，如
$scope.channels[index].hascegory=hascegory（$scope.channels[index].category，name）
现在它开始工作了，另一个问题是，如何设置起始类别，以便用户不必选择类别来查看频道。在方法中，hascapection（）。您应该将返回值更改为
return！（e==-1）
。这更重要readable@Riverside，同意这将是一个改进，但当我回答问题时，我会尽量将代码更改从原来的更改保持在最低限度，否则就有可能掩盖答案所需的实际更改。@Duncan你是对的，这完全有道理。这只是像你说的一个小小的改进。哇uld类似于
ng if=“$ctrl.categories.includes（channel）”
的内容也可以在每个摘要循环中调用？其中
categories
是字符串列表，而
channel
是字符串。
<md-card flex="15" flex-xs="40" class="slide-up" layout="column" ng-repeat="channel in channels | orderBy: 'number' | filter: queryname" ng-if="hasCategory(channel.category)" ng-init="channel.edit = false">
  <md-card-header ng-show="channel.edit == false">
    <img ng-src="{{channel.logo}}" alt="">
  </md-card-header>
  <md-card-header-text ng-show="channel.edit == false">
    <span class="md-subhead dark-blue" layout="row" layout-align="center" layout-margin>{{channel.number}}</span>
  </md-card-header-text>
</md-card>

$scope.setCategory = function (name) {
  $scope.activeCategory = name;
  for (var index=0; index < $scope.channels.length; index++) {
      $scope.channels[index].hasCategory = hasCategory($scope.channels[index].category, name);
  }
};

function hasCategory(categoryNameArray, name) {
  console.log('thisisbeingcalled');
  var e = _.indexOf(categoryNameArray, name);
  if (e === -1) {
    return false;
  } else {
    return true;
  }
}

<md-card flex="15" flex-xs="40" class="slide-up" layout="column"
    ng-repeat="channel in channels | orderBy: 'number' | filter: queryname"
    ng-if="channel.hasCategory"
    ng-init="channel.edit = false">
  <md-card-header ng-show="channel.edit == false">
    <img ng-src="{{channel.logo}}" alt="">
  </md-card-header>
  <md-card-header-text ng-show="channel.edit == false">
    <span class="md-subhead dark-blue" layout="row" layout-align="center" layout-margin>{{channel.number}}</span>
  </md-card-header-text>
</md-card>