Binding directive from object to ng-repeat in AngularJS

Question

I'm using a directive with ng-repeat, which looks like this:

<new-tax-country  
    ng-repeat="newItem in data.company.extraTaxCountries track by $index" 
    ng-model="data.company.extraTaxCountries[$index]"> 
</new-tax-country>

I'm adding objects in the array according to the need, like this:

$scope.addTaxCountry = function() {
   $scope.data.company.extraTaxCountries.push({});
}

On every click of the button, I'm adding a new empty object into the array, and also a new directive is created.

I need to bind the directive to the empty object, so that when I fill the fields inside the directive, those exist also in the previously empty object.

My directive so far looks like this:

(function() {

    angular.module('account-form-client-de')
        .directive("newTaxCountry", function(Countries) {
            var options = {
                restrict: 'E',
                require: 'ngModel',
                replace: true,
                scope: {
                    
                },
                link: function(scope, element, attrs, controller, $parent) {
                        
                    
                },
                templateUrl: 'template/directive/new-tax-country.html'
            };

            return options;
        });
})();

And the html:

<div class="newtaxcountry">
    <label for="new_taxid">
        bla
    </label>
    <input name="new_taxid" ng-model="newTaxInnerScope.new_taxid">
</div>

How could I proceed so that every newItem in data.company.extraTaxCountries automatically inherits the properties of the newTaxInnerScope object that exists inside the directive?

casenonsensitive · Accepted Answer · 2020-09-30 11:59:34Z

2

You need to set up a bidirectional binding in order to read and write back from within the inner directive to your variables.

I created a fiddle https://jsfiddle.net/aemw7d29/1/

The main part is this:

angular.module('account-form-client-de')
    .directive("newTaxCountry", [function(Countries) {
        function link(scope, element, attrs, controller, $parent) {
            scope.ngModel.a = scope.ngModel.a ? scope.ngModel.a++ : 1;
        }
        
        var options = {
            restrict: 'E',
            require: 'ngModel',
            replace: true,
            scope: { ngModel : '=' },
            link: link,
            template: '<div class="newtaxcountry"><label for="new_taxid">bla</label><input name="new_taxid" ng-model="newTaxInnerScope.new_taxid">{{ngModel}}</div>'
        };

        return options;
    }]);

answered Sep 30, 2020 at 11:59

casenonsensitive

9502 gold badges10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric Mitjans Over a year ago

Maybe I'm missing something, but in your example, the ng-model="newTaxInnerScope.new_taxid" from the input is not bind to the newItem?

casenonsensitive Over a year ago

Oh, right I forgot something. Have a look at the updated fiddle jsfiddle.net/aemw7d29/2 The names are changed a bit, but it should show how it will work.

Petr Averyanov · Accepted Answer · 2020-09-30 14:18:53Z

Though there is accepted answer, I'll leave it here...

First of all if you need simple input for directive -- never name it ng-model (also you dont need to require ngModel directive), just take any other name e.g. country here:

<new-tax-country
  ng-repeat="country in data.company.extraTaxCountries track by $index" 
  country="country">
</new-tax-country>


.directive("newTaxCountry", [function(Countries) {
    var options = {
        restrict: 'E',
        replace: true,
        scope: { country : '=' },
        template: '<div class="newtaxcountry"><label for="new_taxid">bla</label><input name="new_taxid" ng-model="country.new_taxid"></div>'
    };
    
    return options;
}]);

You may want to use ng-model if you want to put this directive into some form and specify validators on it (not on underlined input element), then you require ngModelCtrl and work with it instead of scope binding.

Collectives™ on Stack Overflow

Binding directive from object to ng-repeat in AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related