Magento Simple Configurables Products - AngularJS

http://angularjs.org/

by leeroy

HTML

<script src="http://ci.angularjs.org/view/AngularJS/job/angular.js-angular-master/lastSuccessfulBuild/artifact/build/angular.js"></script>
<div ng-controller="MyCtrl">
    <div product-options="productData" final-price="price"></div>
    <p>Prix final : <span style="color:red; font-size:120%;">{{price}}</span>
</div>

<script type="text/ng-template" id="partials/directives/productOptions">
    <div class="options_attribute" ng-repeat="attribute in data.attributes">
        <label class="required">{{attribute.label}} : </label>
        <select ng-model="attribute.selected" ng-change="selectOption(attribute, $index)" ng-options="o.label for o in attribute.filteredOptions" ng-disabled="attribute.isDisabled">
          <option value="">{{data.chooseText}}</option>
        </select>
    </div>        
</script>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('productOptions', function() {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            data: '=productOptions',
            price: '=finalPrice'
        },
        templateUrl: 'partials/directives/productOptions',
        link: function(scope, element, attrs) {
            var attrs = scope.data.attributes;
            var products = scope.data.childProducts;
            var prodIds = [];
            
            // Place all child products ID in an array
            for(var prodId in products) {
                prodIds.push(prodId);
            }
            
            // Set possible products and attrs for first attribute
            attrs[0].filteredProducts = prodIds;
            attrs[0].filteredOptions  = attrs[0].options;
            
            // Reset all attributes except the first
            resetFollowingAttrs(attrs, 0);
            
            // Called when a user change the selected value of an attribute
            scope.selectOption = function(attr, index) {
                if(attr.selected !== null) {                    
                    if(attrs.length > index+1) {
                        // Reset all following attributes
                        resetFollowingAttrs(attrs, index);
                        
                        // Activate the next option
                        attrs[index+1].isDisabled = false;
                        
                        // Filter possible final products id for next attr (selectedAttrProducts ∩ selectedOptionProducts)
                        attrs[index+1].filteredProducts = getIntersect(attrs[index].filteredProducts, attr.selected.products);
                        
                        // Filter next attr options
                        filterAttrOptions(attrs[index+1]);
                        
                        // Get price for this selected product
                        scope.price =...