md-radio-button 无法识别 ng-checked答案

【问题标题】：md-radio-button not recognizing ng-checkedmd-radio-button 无法识别 ng-checked
【发布时间】：2015-09-04 13:03:44
【问题描述】：

我正在尝试查看用户是否已经订阅了计划，如果是，请选中相应的单选按钮。

我有一组 md 单选按钮，我正在使用 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>

我有一个从数据库中获取所有计划的服务：

      //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);
    }
  });

注意 HTML 中的 ng-checked 属性。当我查看 Chrome 的检查器时，它会准确地吐出您在代码中看到的内容，ng-checked="hasPlanID == planInfo._id"。

如何让它识别变量值并将实际表达式解析为真或假？

【问题讨论】：

标签： javascript angularjs material-design

【解决方案1】：

知道了。似乎 ng-checked 不适用于 md-radio-button，它仅适用于 html 输入。您必须使用可以评估表达式的 ng-class 指令将 md-checked 类添加到 md-radio-button 元素：

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

【讨论】：

这帮助我从我从数据库中检索到的对象设置单选按钮。谢谢
对我来说不仅仅使用 ng-class="{'md-checked':$parent.hasPlanID == planInfo._id}" 但你给了我这个线索，我尝试使用 ng- class="{'md-checked':$parent.hasPlanID == planInfo._id}" 而不是 value="{{planInfo._id}} 我尝试使用 ng-init="planInfo._id" 并且效果很好。所以谢谢。

【解决方案2】：

您不必手动处理该检查。无需填充 $scope.hasPlanID 属性，只需将 $scope.plan 设置为当前计划，如下所示：

//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);
  }
});

这应该会自动处理检查，因为您的模型设置为$scope.plan：

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

【讨论】：

我的回答确实显得老套和不必要。谢谢！

【解决方案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>

【讨论】：

【解决方案4】：

如果您想将单选按钮选中为 md-radio-button ，请使用 ng-value 而不是 value ，而不使用 ng-checked，例如

<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>

此代码段将模拟 plan 的值，并根据 planInfo._id 的值选择适当的单选按钮。

希望这会有所帮助！

【讨论】：