Usman Iqbal Usman Iqbal - 11 days ago 5
AngularJS Question

How to hide an element while using a directive?

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><a href="#/product">{{active_products.name}}</a></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

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.