首页 文章

通过可点击的选项而不是select-option（下拉列表）绑定到ngModel

提问于
浏览 次
0

我正在尝试使用预定义颜色构建基本颜色选择器 .

为此我有一个对象“颜色”与颜色值作为它的属性：

public colors = [
    { value: '#ffffff' },
    { value: '#919191' },
    { value: '#555555' },
    // and some more
];

在网络上的一些例子后，我在我的html中设置了一个select-option结构：

<select name="role" [(ngModel)]="item.color">
  <option *ngFor="let color of colors" [value]="color.value">
     <div class="color-box-modal" [style.background]="color.value"></div>
  </option>
</select>

这会为选项创建一个下拉菜单，但内部颜色不会显示 . 类color-box-modal有高度和宽度值，因为我不打算有一个下拉列表，但是有几个彩色框可以点击以便选择 .

是否有一个替代选择选项结构，允许我没有下拉列表，但只有几个彩色框？单选按钮/复选框也不是理想的方式，因为我想在它自己上面有一个可点击的字段，它会对被点击做出反应 .

如果没有其他选择，是否可以通过按钮单击进行ngModel绑定？

编辑：

在Osman Ceas回答测试选项2后，我现在有了这个：

<ng-template #content let-c="close" let-d="dismiss">
      <i class="close icon" (click)="d('Close click x')"></i>
      <div class="header">
        Choose a new color
      </div>
      <div class="content">
        <label for="col1" class="color-box-modal" style="background-color: #ffffff">
          <input (click)="c('#ffffff')" id="col1" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#ffffff'">
        </label>
        <label for="col2" class="color-box-modal" style="background-color: #ffff00">
          <input (click)="c('#ffff00')" id="col2" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#ffff00'">
        </label>
        <label for="col3" class="color-box-modal" style="background-color: #00ffff">
          <input (click)="c('#00ffff')" id="col3" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#00ffff'">
        </label>

      </div>
      <div class="actions">
        <div class="ui button" (click)="c('Close click cancel')">Cancel</div>
      </div>
    </ng-template>

虽然ngModel绑定似乎不起作用 . 整个事情在一个模态（模板）中打开，它本身就起作用，只是绑定到ngModel，正如我所说，没有 .

html angular data-binding

2 回答

  • 0

    • 本机HTML选择只会在里面呈现文本，而任何其他标记都将被忽略，这就是为什么你的框没有显示的原因 .

    • 如果你的 <label> 中的单选按钮或复选框包含属性 for 等于 <input> 的ID，你基本上可以点击标签上的任意位置，让我们说一些相邻的文字，点击将传播到输入所以绑定仍然有效 .

    • 您可以创建自己的自定义表单控件，请查看this article . 因此，您可以创建一个自定义颜色选择器表单元素，该元素将使用模板表单或反应形式以任何形式工作 .

    祝你今天愉快

    回复于
  • 1

    现在，这可能对每个人都没有帮助，但这最终是我的解决方案 .

    我开始使用一个循环项目，其中我的问题中的模板是针对一个项目的 .

    我解决了，或者更确切地说是通过将每个项目移动到它自己的组件来解决绑定情况，有点像这样：

    <div *ngFor="let item of items>
         <app-sub-item [item]="item"></app-sub-item>
</div>

    在里面我有一些这样的：

    <label for="col1" class="color-box-modal" style="background-color: #ffffff">
          <input (click)="setColor('#ffffff')" id="col1" type="radio" class="hidden">
</label>

    在ts文件中有以下内容：

    setColor(color: string) {
  this.item.color = color;
}

    这实际上目前工作得很好 .

    希望无论谁阅读此问题都可以在我的解决方案中找到一些用处 .

    回复于

相关问题