Using AngularJs component mutiple times in ng-repeat

user_5247678 0
Viewed 114

I have a drop down component in angularjs which when used single time works fine and the values are selected but if I use the same component multiple times in ng-repeat the drop downs are rendered but the values are not being selected. I am using the following code:

JS file:

angular.module('mainApp').component('inputSelectComponent', {
    templateUrl : 'sys/templates/input-select.template.html',
    bindings : {
        ngModel : '='
    },
    controller: ['$scope', '$element', '$http', 'translate', 'apiServer', 'session', 'EVENTS', function compCategoriesDropdownController($scope, $element, $http, translate, apiServer, session, EVENTS) {
        
        var _select = $element.find('select');

        $scope.options = JSON.parse($element.attr('options'));

        setTimeout(function(){
            $element.find('select').selectize({});
        }, 0);
        
        $scope.$watch('$ctrl.ngModel', function(e){
            var selectize = _select[0].selectize;
            if (typeof(selectize) !== 'undefined') {
                setTimeout(function(){
                        selectize.setValue(e);
                }, 0);
            }
        });         
        
        $scope.$watch('$element.attr', function(e){         
            $scope.label = $element.attr('label');
            if ($element.attr('disabled') === 'disabled'){
                _select.attr('disabled', 'disabled');
            }
        });     
        
        $element.find('select').on('change', function(e){
            $scope.$ctrl.ngModel = e.target.value;
        });

    }]
});

Template file:

<label class="col-form-label">{{label}}</label> 
<select class="cat-drop{{(error!=null)? ' not-validated' :''}}">
    <option ng-repeat="(key, value) in options" value="{{key}}">    
        {{value}}
    </option>   
</select>

This is how I am calling it:

<div ng-repeat="relatedproduct in relatedproductsData">
    <span class="serial-number">{{ $index + 1 }}.</span>
    <div class="form-group row">                        
        <input-select-component ng-model="relatedproduct.item_type" class="input-component col-sm-2" label="{{t('related_products_item_type')}}" options='{"2": "2 - For Product", "3": "3 - For Category"}'></input-select-component>      
    </div>                                                      
</div>

Any help is appreciated!

selectize.js angularjs php jquery javascript
2 Answers

I used a directive instead of an component. The documentations says:

Components only control their own View and Data: Components should never modify any data or DOM that is out of their own scope. ..

Using a directive allows you to usa ng-model="ngModel" on the select component in the directive and change the value directly.

 angular.module('mainApp').directive('inputSelectComponent', function () {

            return {
                template: `<label class="col-form-label">{{label}}</label> 
                            <select class="cat-drop{{(error!=null)? ' not-validated' :''}}" ng-model="ngModel">
                                <option ng-repeat="(key, value) in options" value="{{key}}">    
                                    {{value}}
                                </option>   
                            </select>`,
                scope: {
                    ngModel: '=',
                    options: '=',
                }

            }

        });

it does work in the caller:

<div ng-repeat="relatedproduct in [{ item_type : '' }, {item_type : ''}, { item_type: '' }]">
            <span class="serial-number">{{ relatedproduct }}.</span>
            <div class="form-group row">
                <input-select-component ng-model="relatedproduct.item_type" 
                                        class="input-component col-sm-2" 
                                        label="{{t('related_products_item_type')}}" 
                                        options='{"2": "2 - For Product", "3": "3 - For Category"}'></input-select-component>
            </div>
        </div>

Good luck!

user_28936770

Try using $timeout instead of setTimeout. Maybe because of angularJS digest...

user_66624990
Related