只读选定的无线电标签

Question

我有性别的输入表格 当readonly为false时，有一些radiobuttons可供选择：
但是当readonly为true时它只显示实际值，但我希望显示所选radiobutton的标签。我该怎么做（以一种很好的方式）？
它应该是“männlich”，而不是“M”。

这是我的代码：

<div class="form-group {{selectedProfile.gender ? '' : 'has-error'}}">
    <label for="gender" class="col-sm-3 control-label">Geschlecht</label>
    <div id="gender" class="col-sm-9">
        <input type="text" ng-model="selectedProfile.gender" class="form-control"
               ng-if="readonly" ng-disabled="readonly"/>
        <label ng-if="!readonly">
            <input type="radio" ng-model="selectedProfile.gender" value="M">
            männlich
        </label>
        <label ng-if="!readonly">
            <input type="radio" ng-model="selectedProfile.gender" value="F">
            weiblich
        </label>
        <label ng-if="!readonly">
            <input type="radio" ng-model="selectedProfile.gender" value="U">
            keine Angabe
        </label>
    </div>
</div>

Answer 1

根据@Basel Issmail评论，您可以创建包含性别标签和性别值的数组。使用ng-repeat显示单选按钮，然后在ng-change中更改标签。

 <label ng-if="!readonly" ng-repeat="gender in genderList">
   <input type="radio" ng-model="selectedProfile.gender" value="{{gender.value}}" 
          ng-change="selectedProfile.genderLabel = gender.label">
        {{gender.label}}
  </label>

JS Fiddle link