Dynamic models using ng-if - AngularJS form

Question

Here is my code:

As you can see, this will only get displayed if q.answer == 'Fail' - that is the value of a select box further up in the page.

If "Fail" has been selected, then the user can select a defect type which will be saved into question.failure.type.

My question is, if a user selects "Fail" and then selects a defect type - and then changes "Fail" to something else. Then question.failure.type is still retained, even though the ng-if is false now. How can I make it so that question.failure.type is no longer in the model if the ng-if is false?

<div class="panel panel-danger" ng-if="q.answer == 'Fail'">
    <div class="panel-heading">
        <h3 class="panel-title">Comments</h3>
    </div>
    <div class="panel-body">
        <form novalidate name="failureForm">
            <div class="row">
                <div class="col-xs-12">
                    <select name='defect' class='form-control' ng-model='question.failure.type' ng-options='item for item in defectTypes' required>
                        <option value=''>Select a defect type...</option>
                    </select>

                    ...

Edit: added new code as requested

<div ng-repeat="q in questions" ng-show="standard.serviceType">
    <div class="panel panel-info">
        <div class="panel-heading">
            <h3 class="panel-title">{{ $index + 1 }}. <span ng-bind="q.questionText"></span></h3>
        </div>
        <div class="panel-body">
            <answer-field question="q"></answer-field>
        </div>
    </div>
    ... then the code in the example above appears

you'll have to handle it wherever q.answer is changed, which you didn't show in this snippet. — Claies
– Claies, Commented Aug 31, 2015 at 2:58
that depends entirely on how q.answer is bound, which is why I suggested that you add that declaration to the question. — Claies
– Claies, Commented Aug 31, 2015 at 3:02
How do you mean? I don't explicitly bind q.answer anywhere in the JS. The HTML is where it's first referenced if that makes sense. — b85411
– b85411, Commented Aug 31, 2015 at 3:03
right, I never mentioned JS code? I suggested that you show how q.answer is represented. is it a radio button, a dropdown, a type input? — Claies
– Claies, Commented Aug 31, 2015 at 3:04

Claies · Accepted Answer · 2015-08-31 03:23:58Z

1

Assuming that the value of q.answer is assigned in an <input> element in your HTML, you can clear the value of question.failure.type based on any conditional expression using ng-change.

For example:

<input ng-bind='q.answer' 
       ng-change='question.failure.type =
                 (q.answer == 'Fail' ? question.failure.type : undefined)'
>

This is only a trivial example, but it is essentially setting the question.failure.type to either the value it already has or undefined, depending on if q.answer == 'Fail' or not.

answered Aug 31, 2015 at 3:23

Claies

22.4k4 gold badges56 silver badges81 bronze badges

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

5 Comments

b85411 Over a year ago

Will undefined make question.failure.type not exist at all (which is what I want)? So if I do a JSON stringify of question, I will see no reference to failure.type at all?

Claies Over a year ago

that's what setting it to undefined does, yes.

Claies Over a year ago

I also assume that this is pseudocode, with the mixed use of q and question, but hopefully this points you in the right direction anyway.

Claies Over a year ago

this is probably logic that I would consider putting in the controller for the custom directive, or at least in the page controller, rather than inline in the HTML; This kind of logic is really not the responsibility of the View, but I wanted to show this as a possibility.

b85411 Over a year ago

Thanks. I used ng-change='question.failure = (question.answer != "Fail") ? undefined : question.failure;' and that worked. But I will do as you say and look at the other solutions too because it might be better suited to the the JS code rather than in-line. Thanks for your help.

Nagaraja Thangavelu · Accepted Answer · 2015-08-31 04:03:14Z

Here is the code for your question, assuming some predefined values for your scope variable.

<html ng-app="myNoteApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module('myNoteApp', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.q = {
   answer : 'Fail'
 };
 $scope.defectTypes = ['Item1','Item2','Item3'];
}]);
</script>

<div ng-controller="ExampleController">
<form name="myForm">
 <label>Value1:
    <input type="checkbox" ng-model="q.answer"  ng-true-value="'Pass'" ng-false-value="'Fail'">
 </label><br/>
 <tt>Checkbox value is {{q.answer}}</tt><br/>
</form>
<div class="panel panel-danger" ng-if="q.answer === 'Fail'">
<div class="panel-heading">
    <h3 class="panel-title">Comments</h3>
</div>
<div class="panel-body">
    <form novalidate name="failureForm">
        <div class="row">
            <div class="col-xs-12">
                <select name='defect' class='form-control' ng-model='question.failure.type' ng-options='item for item in defectTypes' required>
                    <option value=''>Select a defect type...</option>
                </select>
            </div>
        </div>
    </form>
</div>
</div>
</div>
</html>

Sherali Turdiyev · Accepted Answer · 2015-08-31 03:27:47Z

0

you should put in your controller

$scope.$watch('q.answer', function(newVal, oldVal){
   if(newVal!='Fail') question.failure.type.length = 0;
})

or, put into ng-change method

<input type="text" ng-model="q.answer" ng-change="changing()"/>

in controller

$scope.chaging = function(){
if($scope.q.answer!='Fail') question.failure.type.length = 0;
}

answered Aug 31, 2015 at 3:27

Sherali Turdiyev

1,75316 silver badges29 bronze badges

Collectives™ on Stack Overflow

Dynamic models using ng-if - AngularJS form

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related