Question

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

例如：如果选择“left”radiobutton需要在复选框的左侧放置标签，或者使用vise verse。

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

Answer 1

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

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

Answer 2

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

＆＃13;

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

＆＃13;

@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标签位置变化

2 个答案: