Angular 2标签位置更改答案

【问题标题】：Angular 2 label position changeAngular 2标签位置更改
【发布时间】：2016-07-02 13:02:12
【问题描述】：

我刚开始练习 Angular 2。我有一个复选框和右侧的标签。我有 2 个单选按钮，1-right 和 2-left。根据选择的单选按钮，我需要移动标签。

例如：如果选择了“左”单选按钮，则需要在复选框的左侧放置标签，或者虎钳。

希望我能解释得足够好:)。

【问题讨论】：

这与 Angular 无关。位置和标签是毫无意义的标签。您应该将标签更改为 css 以使问题对合适的人可见。
是的，我正在考虑。我也想知道有没有角度的方法？！
在您获得 CCS 答案后，如果您真的想在 Angular 中进行转换，则很容易转换为 Angular。使用纯 CSS 进行布局通常是首选方式。它可以帮助添加一些代码来演示您实际尝试完成的工作以及您遇到的问题。

标签： html css angular

【解决方案1】：

非常感谢您的回复，对我帮助很大。最后，我解决了如下：

          <label *ngFor="#item of vm.radioItems">
            <input type="radio" name="options" (click)="vm.label_position.options = item" 
              [checked]="item === vm.options"> 
          <span>To the {{item}}</span>
</label>

@Component({
  selector: 'try-checkbox',
  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
  template: `
    <div>
    <span id="myLabel" *ngIf="model.label_position.options==='left'">MyLabel</span>
       <input class="form" type="checkbox" />
    <span id="myLabel" *ngIf="model.label_position.options==='right'">MyLabel</span>
    </div>
  `
})

class App {
     radioItems: 'right left'.split(' '),
     'label_position': { options: 'left'}
                    ...
    }

基本上我重用了this

【讨论】：

【解决方案2】：

因此，您希望根据您选择的复选框移动标签。使用ng-class：

PLNKR

<form name="myForm">
  <label>
    <input type="checkbox" ng-model="lefty">
    Left
  </label>
  <br/>
  <label>
    <input type="checkbox" ng-model="righty">
    Right
  </label>
  <br/><br /><br />
</form>

<p id="myLabel"  
    ng-class="{toLeft: lefty, toRight: righty }">
         My Label!
</p>

<style>
 .toLeft{
   margin-left: 200px;
 }

 .toRight{
   margin-left: 50px;
 }
</style>

编辑：因此，您希望将标签移动到复选框的左侧或右侧，具体取决于它是否已被单击。我已经更新了我的 plnkr。试试这个：

   <form name="myForm">
     <span id="myLabel" ng-show="lefty" ng-init="lefty = true">My Label!</span>
     <label>
       <input type="checkbox" ng-click="lefty = !lefty; righty = !righty">
     </label>
     <span id="myLabel" ng-show="righty">My Label!</span>
     <br /><br />
   </form>

【讨论】：

谢谢。我有一个复选框，我们称之为 checkbox1。我需要在该复选框1 的左侧或右侧找到标签。左或右取决于所选的单选按钮。