0

If I have an array and json like this. I have omitted a bunch of content which is not needed to explain this.

$scope.socialTypes = ["facebook", "pintrest", "twitter", "linkedin"];
$scope.socialJson = [{"type": "facebook"}, {"type": "twitter"}]

and I have html like this

<span class="btn btn-lg btn-squared" ng-repeat="(socialTypeKey, socialTypeValue) in socialTypes">
    <span ng-repeat="socialData in socialJson">
        <a ng-if="socialData.type == socialTypeKey && socialData.golden && socialData.active" class="{{socialTypeValue.aclass}}"><i class="{{socialTypeValue.iclass}}"></i></a>
        <i ng-if="socialData.type == socialTypeKey && socialData.golden && !socialData.active" class="{{socialTypeValue.iclass}}"></i>
        <i ng-hide="!inArray(socialTypeKey, socialJson)" class="{{socialTypeValue.iclass}}"></i>
    </span>
</span>

Ignore the golden, active, and classes here. What I am wondering is, I need the 3rd element to display whenever the social type is not in the socialJson variable. So basically the first two ng-ifs would display if the social is in both, and the third will display if its not in the array like I mocked up

Metropolis
  • 6,542
  • 19
  • 56
  • 86

1 Answers1

1

Should be able to add a isInside function to the scope. Replace my use of underscoreJS with whatever implementation you'd prefer.

JS: 

$scope.socialTypes = ["facebook", "pintrest", "twitter", "linkedin"];
$scope.socialJson = [{"type": "facebook"}, {"type": "twitter"}]
$scope.isInside = function(array, item) {
  return _.contains(array, item);
}

HTML:

<span class="btn btn-lg btn-squared" ng-repeat="(socialTypeKey, socialTypeValue) in socialTypes">
    <span ng-repeat="socialData in socialJson">
        <a ng-if="socialData.type == socialTypeKey && socialData.golden && socialData.active" class="{{socialTypeValue.aclass}}"><i class="{{socialTypeValue.iclass}}"></i></a>
        <i ng-if="socialData.type == socialTypeKey && socialData.golden && !socialData.active" class="{{socialTypeValue.iclass}}"></i>
        <i ng-hide="!isInside(socialJson, socialTypeKey)" class="{{socialTypeValue.iclass}}"></i>
    </span>
</span>
urban_raccoons
  • 3,499
  • 1
  • 22
  • 33
  • This is close enough, though I had to alter it a bit for my purposes, I guess this is the only way to do it. – Metropolis Jul 02 '14 at 00:53
  • Not to hype my own answer elsewhere (too much...), but I think that this is a good approach to being able to include a set of helper functions in templates: http://stackoverflow.com/questions/19614545/how-can-i-add-some-small-utility-functions-to-my-angularjs-application/19614568#19614568 – urban_raccoons Jul 02 '14 at 04:13