How to set radio button value by query string value on page load using AngularJS

Question

How to set radio button value by query string value on page load using AngularJS

How to set radio button value by query string value on page load using AngularJS?

My View Code

Option One: This field can populate the "$scope.purpose" item in Controller, but doesn't select the radio button.

<input id="QueryStringLoanType" type="hidden" ng-model="data.purpose" ng-init="data.purpose = setLoanType()" />

Option Two: This field can populate the "$scope.data.purpose" item in Directive and selects the correct radio button, but I have to hard code value for it to work.

<input id="QueryStringLoanType" type="hidden" ng-model="data.purpose" ng-init="data.purpose = 'purchase'" />

My Controller

// Function: Set loan type
$scope.setLoanType = function () {
var queryStringLoanType = $location.search().loan_purpose;
$scope.purpose = queryStringLoanType;
if (queryStringLoanType == 'refi-loan') {
  $scope.purpose = "refinance";
}
if (queryStringLoanType == 'purchase-loan') {
  $scope.purpose = "purchase";
}
};

HTML

<div class="col-xs-12 col-sm-6 col-sm-offset-3 text-center">
  <label class="btn btn-cta btn-lg btn-block">
    Refinance
    <input type="radio" name="QuestionButton" ui-sref="home.custname" ng-model="data.purpose" value="refinance" ng-change="processForm()" />
  </label>
</div>

<div class="col-xs-12 col-sm-6 col-sm-offset-3 text-center">
  <label class="btn btn-cta btn-lg btn-block">
    Purchase
    <input type="radio" name="QuestionButton" ui-sref="home.custname" ng-model="data.purpose" value="purchase" ng-change="processForm()" />
  </label>
</div>

Any help is greatly appreciated!

javascript
angularjs

Answer 1

Probably your problem is with your radio buttons. You need to replace your value attribute with ng-value inside your radio element.

You might be declared radio button like this

<input type="radio" name="radio1" ng-model="data.purpose" value="purchase"/>
<input type="radio" name="radio1" ng-model="data.purpose" value="refinance"/>

Working Radio Button

<input type="radio" name="radio1" ng-model="data.purpose" ng-value="purchase"/>
<input type="radio" name="radio1" ng-model="data.purpose" ng-value="refinance"/>

only changed value attribute to ng-value, Angular will manage the value binding of that scope variable.

From your question things are not clearing.

I'm hoping this could help you. Thanks.

Answer 2

I didn't post this question to answer it myself, but after playing around with different solutions, this is what worked for me.

My form is a shared form that works globally on my website, but failed when trying to load my partial form view into a new landing page I'm building. My problem was that I was unable to populate a directive model value in my angular form without hard-coding the value into an ng-int attribute. I'm sure there's a better way to solve this problem, so feel free to comment.

My solution was to wrap my partial view on my landing page with a tag of my directive's name.

For example:

<my-directive>

    <!-- Form Field -->
    <input />

    <!-- Form Field -->
    <input />

</my-directive>