AngularJS ng-if directive using a function not returning a value
Question
I'm still pretty new to AngularJS. Following multiple tutorials online, I used a javascript function inside a ng-if directive to validate whether a group name already exists in an array. If it does, the ng-if block is skipped for the next ng-repeat iteration. If it doesn't, add the group name to an array and create the ng-if block. This is what the HTML code looks like in the partial:
HTML
<span ng-if="checkGroups(service.group.name)">
<!--Make nested list-->
</span>
This is a simplified version of the 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;
}
}
]);
})();
I've used console.log() to return the values and I do get an array with the group names inside as well as a true or false value being returned. The issue is the ng-if function seems to only return false. If I switch the directive function to "checkGroups(service.group.name) == false", it will keep creating the HTML block regardless. Any ideas what I can do to fix this?
2 answers
solution1
0 2018-05-15 15:46:21
I've replaced your service with just a simple array of objects in the controller, since I don't want to create it. But below should do the trick, notice that I flipped the logic around. This will display it only once and will not display it/insert if the object exists already.
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>
solution2
0 2022-07-13 01:45:42
使用控制器参考：
MyController.checkGroups(service.group.name)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.