Директива AngularJS ng-if, использующая функцию, не возвращающую значение - PullRequest
Новая
       11

Директива AngularJS ng-if, использующая функцию, не возвращающую значение

0 голосов
/ 15 мая 2018

Я все еще довольно новичок в AngularJS. После нескольких онлайн-уроков я использовал функцию javascript внутри директивы ng-if, чтобы проверить, существует ли уже имя группы в массиве. Если это так, блок ng-if пропускается для следующей итерации ng-repeat. Если это не так, добавьте имя группы в массив и создайте блок 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() для возврата значений, и я получаю массив с именами групп внутри, а также с возвращаемым значением true или false. Проблема в том, что функция ng-if возвращает только false. Если я переключу функцию директивы на «checkGroups (service.group.name) == false», она будет продолжать создавать HTML-блок независимо. Любые идеи, что я могу сделать, чтобы это исправить?

1 Ответ

0 голосов
/ 15 мая 2018

Я заменил ваш сервис простым массивом объектов в контроллере, так как я не хочу его создавать.Но ниже следует сделать трюк, обратите внимание, что я перевернул логику.Он будет отображаться только один раз и не будет отображаться / вставляться, если объект уже существует. 

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>
...