Angular JS Text Field Input Change - Watch

Question

I have a list of text fields with an empty text field at the end, bound to an array. I need to detect text entry on the empty text field so when a user starts typing a value, I add another empty element to array so the user always has another field ready to work with.

Should I use $watch or ng-change to see the change go down and add the element accordingly? I know $watch is always firing so it seems like that may be a bad option.

    <div ng-repeat="variation in productEditorModel.ColorVariations">
                                                <div class="form-inline">
                                                    <input type="text" id="txtVariationName" placeholder="Name" name="variationName" ng-model="variation.VariationName" required class="form-control">

                                                    </div>
                                            </div>

ivkremer · Accepted Answer · 2015-06-27 12:25:11Z

1

Considering performance aspect, you should better use ng-change because it will work as you've added change listener on the input like $('input').change(...) just as you mentioned.

Considering UX and functionality aspects it is better and easier to simply use $scope.$watch('model', ...) in controller.

But still I suppose it depends on how many inputs you will have. I think there is no really big difference with even 100+ inputs because you just comparing strings, I don't think that user will struggle with delays as he types.

answered Jun 27, 2015 at 12:25

ivkremer

1,2753 gold badges25 silver badges46 bronze badges

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

Comments

zszep · Accepted Answer · 2015-06-27 12:27:47Z

1

Why don't you bind the array to an ng-repeat of input elements? This way the binding will work automatically.

answered Jun 27, 2015 at 12:27

zszep

4,4835 gold badges41 silver badges58 bronze badges

2 Comments

Mike Anderson Over a year ago

Yes they are all bound that way, I updated the OP with code.

zszep Over a year ago

Maybe you wanted this: $scope.GenderID = $scope.Gender[0].GenderID;

Mike Anderson · Accepted Answer · 2015-06-27 17:08:34Z

0

thanks for the input, ng-change worked best.

    ng-change="update(variation,$index);"

    $scope.update = function (variation, index) {
        if (!angular.isUndefined(variation.VariationName)) {
            if (variation.VariationName.length > 0) {
                $scope.addVariation(variation.VariationTypeId);
            } else {
                $scope.productEditorModel.ColorVariations.splice(index, 1);
                $scope.removeVariation(index, variation.VariationTypeId);
            }
        } else {
            $scope.removeVariation(index, variation.VariationTypeId);
        }
    }

answered Jun 27, 2015 at 17:08

Mike Anderson

6073 gold badges8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular JS Text Field Input Change - Watch

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related