How to hide an element while using a directive? - angularjs

Question

I have made a directive in which a single template is using for three functions in a controller. The model for the fields are same. I want to hide a field if the directive is called third time.
<div class="active tab-pane " ng-if="linkid === '1'">
<mallsonline-product info="active_products"></mallsonline-product>
</div>
<!--Active products list ends here -->
<!-- Get Inactive Products -->
<div class="active tab-pane" ng-if="linkid === '2'" >
<mallsonline-product info="inactive_products"></mallsonline-product>
</div>
<!--Get most viewed products ends here -->
<div class="active tab-pane" ng-if="linkid === '3'" >
<mallsonline-product info="mostviewed_products"></mallsonline-product>
</div>
My controller looks something like this
mainControllers.controller('DashboardController', ['$scope', '$http', '$routeParams', '$cookies', '$rootScope', function ($scope, $http, $routeParams, $cookies, $rootScope) {
/* Getting all grid links */
$scope.grLinks = function (Id) {
console.log(Id);
$scope.linkid = Id;
};
/* Getting all grid links ends here */
/* Getting all active product list */
$scope.active_product = function () {
$http.get('js/active-products.json',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.active_products = data.items;
console.log($scope.active_products);
})
.error(function (data) {
console.log(data);
});
};
/* Getting all active product ends here */
/* Getting all inactive product */
$scope.inactive_product = function () {
$http.get('js/inactive-products.json',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.inactive_products = data.items;
console.log($scope.inactive_products);
})
.error(function (data) {
console.log(data);
});
};
/* Getting all inactive product */
/* Getting all most viewed products */
$scope.most_viewed = function () {
$http.get('js/most-viewed.json',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.mostviewed_products = data.items;
console.log($scope.mostviewed_products);
})
.error(function (data) {
console.log(data);
});
};
/* Getting all most viewed products */
$scope.active_product();
$scope.inactive_product();
$scope.most_viewed();
}]);
/* Active products / Inactive and most viewed Directive */
mainControllers.directive('mallsonlineProduct', function () {
return {
restrict: 'E',
scope: {
productInfo: '=info'
},
templateUrl: 'directives/dashboard_product.html'
};
});
/* Active products / Inactive directive ends here*/
and the template looks like this
<li class="bord-1-solid-ccc mg-bt-25" ng-repeat="active_products in productInfo">
<article class="aa-properties-item mg-top-0-notimp">
<a class="aa-properties-item-img" href="#/product">
<img alt="img" class="twohun-oneseventy" src="img/item/6.jpg">
</a>
<div class="aa-properties-item-content">
<div class="aa-properties-about padding-0-notimp">
<h5>{{active_products.name}}</h5>
<p class="font-size-11-imp"><i class="fa fa-building-o" aria-hidden="true"></i> {{active_products.mall.name}}</p>
<p class="font-size-11-imp"><i class="fa fa-map-marker" aria-hidden="true"></i> {{active_products.mall.address}}</p>
<p class="font-size-11-imp"><i class="fa fa-phone" aria-hidden="true"></i> {{active_products.shop.telephone}}</p>
<p class="font-size-11-imp"><i class="fa fa-eye" aria-hidden="true"></i> {{active_products.views}}</p>
</div>
</div>
</article>
</li>
all the fields are present in the model I want to show the active_products.view only when info="mostviewed_products". How can I achieve this ?

Answer 1

Had passed "linkid" in directive to know the current linkid value in template
Please make following changes
Directive
mainControllers.directive('mallsonlineProduct', function () {
return {
restrict: 'E',
scope: {
productInfo: '=info',
linkid:'=linkid'
},
templateUrl: 'directives/dashboard_product.html'
};
});
Html
<div class="active tab-pane " ng-if="linkid === '1'">
<mallsonline-product info="active_products" linkid="linkid"></mallsonline-product>
</div>
<!--Active products list ends here -->
<!-- Get Inactive Products -->
<div class="active tab-pane" ng-if="linkid === '2'" >
<mallsonline-product info="inactive_products" linkid="linkid"></mallsonline-product>
</div>
<!--Get most viewed products ends here -->
<div class="active tab-pane" ng-if="linkid === '3'" >
<mallsonline-product info="mostviewed_products" linkid="linkid"></mallsonline-product>
</div>
In template ('directives/dashboard_product.html')
<p class="font-size-11-imp"><i class="fa fa-eye" aria-hidden="true" ng-if="linkid==3"></i> {{active_products.views}}</p>
Hope this will resolve your issue.