AngularJS - changing property value dynamically

Question

I'm working with an angularjs app and I would like to set one of it's properties dynamically.

This is a piece of my model:

    $scope.data_step_3 = {
        'previous_insurance':{
            'label':'Has this type of insurance ever been:',
            'help_text':'',
            'value':'',
            'required':true,
            'regex':''
        },
        'previous_insurance_description':{
            'label':'If so, please explain (not applicable in Missouri):',
            'help_text':'',
            'value':'',
            'required': true,
            'regex':''
        }
}

And I would to set the required property of previous_insurance_description dynamically. It would the true when previous_insurance.value == 'Non-reviewed'

How can I do that?

Thanks for any help

When will the property be changing? If off of user input (i.e a click), you can use ng-click=someFunction() on the respective element. Let someFunction() be responsible for updating that info. If it's coming directly from an API, you could manipulate the values as soon as you receive them with similar logic. — Dan Keiger
– Dan Keiger, Commented Aug 22, 2016 at 20:23
Your ocntext of code is not very clear. You object come from an api and when do we change it ? — Gerald Chablowski
– Gerald Chablowski, Commented Aug 22, 2016 at 20:23
@DanKeiger Thanks, you're right. I made it in a ng-click, just this ng-click="data_step_3.previous_insurance_description.required = true" — André Luiz
– André Luiz, Commented Aug 22, 2016 at 20:38

Naga Sai A · Accepted Answer · 2016-08-22 20:38:34Z

To achieve expected result, use below option

HTML:

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="x in data_step_3">
 <input value="" ng-model="x.value" ng-keyup="check()">
    <input value="" ng-model="x.label"><br>

  </div>
<span>Required value - {{data_step_3.previous_insurance_description.required}}</span>
</div>



</body>
</html>

JS:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.data_step_3 = {
        'previous_insurance':{
            'label':'Has this type of insurance ever been:',
            'help_text':'',
            'value':'',
            'required':true,
            'regex':''
        },
        'previous_insurance_description':{
            'label':'If so, please explain (not applicable in Missouri):',
            'help_text':'',
            'value':'',
            'required': true,
            'regex':''
        }
}

    $scope.check=function(){
     var prevInsurance_val= $scope.data_step_3.previous_insurance.value;
      console.log(prevInsurance_val)
     if(prevInsurance_val =="Non-reviewed"){
       $scope.data_step_3.previous_insurance_description.required = false;
      }
      else{
         $scope.data_step_3.previous_insurance_description.required = true;
      }
    }
    console.log()
});

Codepen- http://codepen.io/nagasai/pen/YWbxpA

this option works for the dynamic values as well and for testing I am changing the value from true to false manually..Hope this works for you :)

Collectives™ on Stack Overflow

AngularJS - changing property value dynamically

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related