CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-ng-clickng-show
uniXVanXcel
uniXVanXcel

Reputation: 806

Using ng-click to show divs in Angular js

So I have a link in an html box and when clicking the link iam trying to have it show a whole new set of divs replacing the present divs. I tried : 

<a href="" ng-click="Search('Show Products A B C')" > Show Products </a>

Search calls in the function in the controller which returns the data for the A B C products, which are then displayed using 

<div ng-repeat="products in Search( 'Show Products A B C')" </div>

I am basically trying to do something like this:

  <div  ng-repeat=" href="" ng-click="Search('Show Products A B C')"> </div>

which is not proper syntax I understand. But right now nothing happens. Basically from that ng-click i would like to call that portion of the code (ng-repeat) because right now they are not connected. thanks

Upvotes: 0

Views: 299

Answers (2)

Absalon Casta&#241;on
Absalon Casta&#241;on

Reputation: 369

What you should do is to have some array or object A bound to $scope, then when you call search you update A and the changes will be reflected on your view

$scope.show=true;
$scope.products =[A,B,C];
$scope.Search = function() {
    // do list update
    $scope.show=false;
    $scope.products =[D,E,F] ;
}

You also need to change ng-repeat to this:

<div ng-repeat="product in products" </div>

And add ng-show to the first link:

<a href="#" ng-show = "show" ng-click="search();">Click Me</a>

Edit:

Check this fiddle for a working example.

Edit:

Fiddle updated reflecting latest changes.

Upvotes: 1

Jarek Kulikowski
Jarek Kulikowski

Reputation: 1389

ng-repeat will respond to changes in its argument, but your argument is a function Search(). I would suggest the following: In your search function:

$scope.Search = function(arg) {
    // do your search logic
    $scope.productList = <search result list>
}

then in html

<div ng-repeat="products in productList" </div>

Upvotes: 2

Related Questions