Proper way to populate search, etc (collections)

[agamdua]

I'll explain later, but this solves a lot of problems that I would have to manually handle in JS (its a dummy example):

1. http://codepen.io/anon/pen/fCKbJ
2. http://codepen.io/anon/pen/zqbDd

Basically he said presentation of content should never change models ($scope), I explained we'd gone with the hack because of Angular. He said it is better handled by CSS, AngularJS code remains same and uses vanilla ng-repeat which is why it doesn't have the functionality we wanted / hacked.

(Earlier I thought the better way would be to use a nested ng-repeat, I guess that's a very 'general programming' way to think about things, @gpranav88 will feel me here with nested loops!)

[kartikdhar]

@agamdua - Please add the following to Clothzy.CSS:

.list > div {
  padding: 5px;
  display: inline-block;
}

And, use the following for populating in Product-Search.html:

        <div class="row list">
                    <div class="col-lg-3" ng-repeat='val in productRow1'>
                        <div class="thumbnail thumb">
                            <p> {{ searchResults.Products[val].store }} </p>
                            <a class="quickView btn btn-default" data-toggle="modal" href="#myModal">Quick Look</a>
                            <a href="ProductHome-test.html"><img ng-src="/static/Store_{{searchResults.Products[val].store}}/Product_{{searchResults.Products[val].id}}/1-1.jpeg" alt="..."></a>
                            <div class="caption">
                                <p class="product-name"> {{searchResults.Products[val].name}} </p>
                                <p class="store-name">{{searchResults.Products[val].store}}</p>
                                <p class="price"><i class="fa fa-rupee"></i> {{searchResults.Products[val].price}}</p>
                            </div>
                        </div>
                    </div>
        </div>

[kartikdhar]

It's working fine - I tested it out on my Nitrous, but I dont know how to Angularize it. I tested it by changing Clothzy.js line 227 to:

    $scope.productRow1 = _.range(0, 28);

Let me know if you need any more help on this....

[agamdua]

This is done, I'll just push the code to branch:heroku.

However, styling needs to be modified, @kartikdhar please check screenshot. Will reassign to you once pushed.