AngularJS ng-if 指令使用不返回值的函数答案

【问题标题】：AngularJS ng-if directive using a function not returning a valueAngularJS ng-if 指令使用不返回值的函数
【发布时间】：2018-10-25 00:53:39
【问题描述】：

我对 AngularJS 还是很陌生。遵循多个在线教程，我在 ng-if 指令中使用了一个 javascript 函数来验证数组中是否已经存在组名。如果是这样，则在下一次 ng-repeat 迭代中跳过 ng-if 块。如果没有，请将组名添加到数组并创建 ng-if 块。这是部分 HTML 代码的样子：

HTML

<span ng-if="checkGroups(service.group.name)">
      <!--Make nested list-->
</span>

这是 javascript 的简化版本：

JAVASCRIPT

(function () {
    'use strict';

    MainApp.controller('MainController', [
        '$scope',
        'Filters',
        'helper',
        '$timeout',
        '$filter',function(
        $scope,
        Filters,
        helper,
        $timeout,
        $filter) {

            var MainCtrl = this;

            //Function to check group array variable
            $scope.usedGroups = [];

            $scope.checkGroups = function(name) {
                var isValid = true;
                for(var i = 0; i < $scope.usedGroups.length; i++) {
                    if($scope.usedGroups[i] == name){
                        isValid = false;
                        break;
                       }
                }
                if(isValid == true){
                   $scope.usedGroups.push(name);
                    console.log($scope.usedGroups);
                }

                return isValid;
            }

        }
    ]);
})();

我使用console.log() 来返回值，并且确实得到了一个数组，其中包含组名以及返回的真或假值。问题是 ng-if 函数似乎只返回 false。如果我将指令函数切换为“checkGroups(service.group.name) == false”，它将继续创建 HTML 块。有什么想法可以解决这个问题吗？

【问题讨论】：

对不起，我把标题搞砸了。正在返回一个值，但它只是“假”。
你能提供一些你想要的输入值和输出吗？当数组第一次为空时，它应该返回 true。
@KaustubhKhare 我有一个名为 Service 的模型，它有一个名称和一个组名称。使用 ng-repeat，所有服务都通过多个 ng-if 指令进行验证。一个 ng-if 是服务是否是组的一部分，然后从那里检查该组是否已经存在。如果该组尚不存在，则会创建一个嵌套列表，其中包含该组下的所有服务。如果确实存在，则跳过下一次迭代。这听起来令人费解，但客户特别想要它，以便分组服务按字母顺序显示在非分组服务旁边。

标签： javascript angularjs django angularjs-directive angular-ng-if

【解决方案1】：

我已经用控制器中的一个简单对象数组替换了您的服务，因为我不想创建它。但是下面应该可以解决问题，请注意我颠倒了逻辑。这只会显示一次，如果对象已经存在，则不会显示/插入。

var app = angular.module("MyApp", []);

var MyController = function($scope) {

  // Somewhere in your service
  $scope.service = {
    group: [{
        name: "Foo"
      }
    ]
  }

  //Function to check group array variable
  $scope.usedGroups = [];

  $scope.checkGroups = function(name) {
    for (var i = 0; i < $scope.usedGroups.length; i++) {
      if ($scope.usedGroups[i] == name) {
        console.log(name + " exists already!", $scope.usedGroups);
        return true;
      }
    }
    $scope.usedGroups.push(name);
    console.log(name + " doesn't exist!\n", $scope.usedGroups);
    return false;
  }
}
app.controller(MyController, "[$scope, MyController]");

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-app="MyApp">
  <div ng-controller="MyController">
    <div ng-repeat="item in service.group"> <!-- This is ran three times, just like calling it with three different names, but I put it in the controller to make it accessible -->
      <span ng-if="checkGroups(item.name)">
        {{ item.name }}
        <!--Make nested list-->
      </span>
    </div>
  </div>
</body>

</html>

【讨论】：

感谢您的回复。逻辑看起来很合理。我在我的应用程序中尝试了代码，似乎我有同样的问题，它只接受一个错误的值。对不起。本来想附上图片的，但是评论发送得太快了。 imgur.com/wbnRyNl
@Michael 您是否 100% 确定您的 service.group.name 中包含正确的数据？
这是控制台为代码返回的内容，因此似乎正在添加组：imgur.com/HS8WzCR
我明白你在说什么。在这一点上，我的建议是过滤掉您的service 中的重复项，这样您就不必检查重复项。或者创建另一种方法从controller 的列表中删除重复项。
好的。再次感谢所有的帮助！我将尝试使用自定义指令在列表完成呈现后调用该方法的第二种方法。