CODEWITHSUNDEEP
angularjs
Boaris
Boaris

Reputation: 5226

AngularJS 2 lists as directives

I have to implement an online shop. There are list of goods and the basket (list of selected goods). I have a controller with arrays: goods (filled) and basket(empty). I decided to create a directive 'goods-list' which will get a list of goods as parameter and simply render it, just like:

<ul class="goods">
    <li class="asset" ng-repeat="product in products">{{product.name}}</li>
</ul>

But I want to also implement next logic. I want that an item from list could be selectable and after I click on it, it will add to the basket array and vice versa. Render will seems like that:

<h3 id="basket">Basket</h3>
<goods-list products="basket"></goods-list>
<h3 id="goods">Goods</h3>
<goods-list products="goods"></goods-list>

What is the right way to implement it?

Upvotes: 0

Views: 57

Answers (1)

JB Nizet
JB Nizet

Reputation: 691893

You would add a parameter to the directive scope:

onSelect:'&'

That you would use this way:

<h3 id="basket">Basket</h3>
<goods-list products="basket" on-select="moveToGoods(selectedProduct)"></goods-list>
<h3 id="goods">Goods</h3>
<goods-list products="goods" on-select="moveToBasket(selectedProduct)"></goods-list>

In the directive scope, you would define a function like the following:

scope.select = function(product) {
    scope.localFn({selectedProduct: product});
};

and it would be called from the directive template, for example:

<ul class="goods">
    <li class="asset" ng-repeat="product in products">{{product.name}} <button ng-click="select(product)">Move</button></li>
</ul>

The parent controller would of course have to define the two moveToBasket() and moveToGoods() functions, which consist inremoving the product from one list and adding it to the other.

Upvotes: 1

Related Questions