Html 只读时，仅选定的无线电标签可见

我有一张性别输入表。
当readonly为false时，有单选按钮可供选择：
但当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>

石膏
玛尼里奇
威布里奇
基恩·安加贝

基于@Basel Issmail comment，您可以创建一个包含性别标签和性别值的数组。使用

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>

{{gender.label}

---

为什么不使该值与标签相同？@BaselIssmail，因为该标签以后可能会被特定语言的翻译替换。如果您提供更改只读变量的函数，将有助于回答这个问题。@BaselIssmail

readonly=！只读

，此代码在我单击编辑/完成按钮时执行，但我真的不明白这有多重要为什么不将selectedProfile.gender以外的其他变量像selectedProfile.GetUnderLabel一样绑定到您的输入，并且在执行代码时设置一个条件，当selectedProfile.gende为m时，让selectedProfile.getnderLabel=männlich，在这种情况下，您也可以处理其他语言。我在没有selectedProfile.genderLabel的情况下完成了此操作，但您的代码足以让我理解如何轻松解决此问题，谢谢