md-radio-button not recognizing ng-checked

Question

I'm trying to see if a user is already subscribed to a plan and if so, check the appropriate radio button.

I have a group of md radio buttons that I'm creating with ng-repeat:

          <md-radio-group class="md-primary" ng-model="plan">

        <div flex ng-repeat="planInfo in plans" class="plan-options">
          <md-radio-button value="{{planInfo._id}}" name="plan" class="md-primary" ng-checked="hasPlanID == planInfo._id" required>

            <h2 class="plan-name">{{planInfo.name}}</h2>

            <h3 class="plan-price">${{planInfo.price}}</h3>

          </md-radio-button>
        </div>

      </md-radio-group>

I have a service that's getting all of the plans from the database:

      //check to see if user already has a plan
  MyService.GetPlan(currentUser.username).then(function (response) {
    if (response.success) {
      //This does resolve correctly
      $scope.hasPlanID = response.data.plan;

      MyService.GetAllPlans().then(function (response) {
        if (response.success) {
          //plans display properly
          $scope.plans = response.data;
        } else {
          $log.debug(response.message);
        }
      });
    } else {
      $log.debug(response.message);
    }
  });

Notice the ng-checked attribute in the HTML. When I look in Chrome's inspector, it literily spits out exactly what you see in the code, ng-checked="hasPlanID == planInfo._id".

How do I get it to recognize the variable values and resolve the actually expression to true or false?

Answer 1

Got it. Seems like ng-checked does not work for md-radio-button, it only works for html inputs. You have to add the md-checked class to the md-radio-button element by using the ng-class directive which can evaluate an expression:

<md-radio-button value="{{planInfo._id}}" name="plan" class="md-primary" ng-class="{'md-checked':$parent.hasPlanID == planInfo._id}" required>

Answer 2

You shouldn't have to manually handle that check. Instead of populating the $scope.hasPlanID property just set $scope.plan to the current plan, like so:

//check to see if user already has a plan
MyService.GetPlan(currentUser.username).then(function (response) {
  if (response.success) {
    //This does resolve correctly
    $scope.plan = response.data.plan;

    MyService.GetAllPlans().then(function (response) {
      if (response.success) {
        //plans display properly
        $scope.plans = response.data;
      } else {
        $log.debug(response.message);
      }
    });
  } else {
    $log.debug(response.message);
  }
});

That should then automatically handle the check since your model is set to $scope.plan :

<md-radio-group class="md-primary" ng-model="plan">

Answer 3

$scope.sel = 'lu';

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<md-radio-group  ng-model="sel" ng-change="logos()" ng-model="myValue" class="settings-radio-button" layout="row">
    <md-radio-button value="lu" ng-checked="true" class="md-primary">Upload With URL</md-radio-button>
    <md-radio-button value="li" class="md-primary">Select Logo Image</md-radio-button>
</md-radio-group>

Answer 4

If you want to check a radio button as md-radio-button use ng-value instead of value without ng-checked Eg

<md-radio-group class="md-primary" ng-model="plan">
    <div flex ng-repeat="planInfo in plans" class="plan-options">

      <md-radio-button ng-value="planInfo._id" name="plan" class="md-primary" ng-checked="hasPlanID == planInfo._id" required>

        <h2 class="plan-name">{{planInfo.name}}</h2>

        <h3 class="plan-price">${{planInfo.price}}</h3>

      </md-radio-button>

    </div>

</md-radio-group>

this code segment will model values of plan and appropriate radio button will be selected depending on the value of planInfo._id .

Hope this will help!