Angularjs accessing scope for dynamic elements

Question

I have 2 radio input fields

<input type="radio" name="location_type" ng-model="location_type" value="ANYWHERE" required> Anywhere
<input type="radio" name="location_type" ng-model="location_type" value="FIXED" required> Fixed

If the selected radio is value is "FIXED", another text field is displayed using ng-if. This text field have 'required' validation.

<div ng-if="location_type == 'FIXED'">
    <input type="text" class="form-control" name="city" ng-model="city" placeholder="Enter City" ng-blur="cname=''" ng-focus="cname='bold'" required>
</div

I do not get the value of $scope.city in controller because the input city is displayed dynamically when I click on the radio button with value value FIXED.

If I use ng-show instead of ng-if, I get the $scope.city variable value in controller, but in that case the validation for city input is working even when I select radio button ANYWHERE. The city field will be hidden and its validation need not work when I select radio button ANYWHERE.

Who can make my day :)

Just try use ng-required="location_type=='FIXED'" on input. — Stepan Kasyanenko
– Stepan Kasyanenko, Commented Sep 5, 2016 at 6:08

RIYAJ KHAN · Accepted Answer · 2016-09-05 10:32:09Z

2

ng-if directive create new child scope.

As per your your html, you are assigning city to this child scope and not the parent scope which is your controller.

So,not accessible in controller.

So, you need to do something like this.

Declare object in parent controller like this ;

$scope.parentObj = {};

And change your html ;

<input type="text" class="form-control" name="city" ng-model="parentObj" required>

Now, your child scope will get the inherited object property from controller;

So, it will reflect in controller.

Here is the working Plunker

edited Sep 5, 2016 at 10:32

answered Sep 5, 2016 at 6:13

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

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

3 Comments

Mirza Over a year ago

Need not initialize element inside parentobj. $scope.parentObj={} works

Mirza Over a year ago

Thanks for the solution

Mirza Over a year ago

ok, can you remove the city parameter as empty from parentObj initialize, as its actually not required.

Makarov Sergey · Accepted Answer · 2016-09-05 05:46:40Z

0

Have you tried ng-required="boolValueOrExpression" ? It's a conditionally validation in your case.

answered Sep 5, 2016 at 5:46

Makarov Sergey

9327 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angularjs accessing scope for dynamic elements

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related