Javascript Angular JS-绑定自定义html属性

我只是从Angular JS开始，我发现它在数据处理方面非常方便

我的问题是，是否可以仅通过html绑定自定义属性？特别是使用select元素

我不想获取value属性，而是想从select元素下的option标记中获取一个自定义属性

为了清楚起见，我不想显示输入元素的“值”，而是想显示data-custom1中的内容，即单词“payment”

例如：

<select ng-model="colors">
<option data-color-hex="#2ba2ba" value="1"> Color A<option>
<option data-color-hex="#222222" value="2"> Color B<option>
<option data-color-hex="#cacaca" value="3"> Color X <option>
</select>

<p>{{display the data-color-hex value here}} </p>

颜色A
颜色B
X色
{{在此处显示数据颜色十六进制值}

如果我从select元素中选择一个选项，将显示数据颜色十六进制

---

在元素中，而不是值1,2,3。

如果要获取输入值，必须使用ng model，仅此项

然后，在controller.js中，从ng模型中获取输入值

---

（我不知道这是否是您想要知道的）

有两种方法可以做到这一点，您可能会想使用第一种方法：

<input ng-model="amount" data-custom1="{{payment}}">

<p>{{payment}}<p>

{{payment}}

或使用ngAttr：

<input ng-model="amount" ng-attr-payment="{{payment}}">

<p>{{payment}}<p>

{{payment}}

---

后者用于挑剔的DOM API，如SVG DOM API。您可以在此处阅读更多内容：

您首先需要为您的

选择设置
名称
：

<select name="colors" ng-model="$ctrl.colors">
   <option value="1" data-custom1="paymentA">1</option>
   <option value="2" data-custom1="paymentB">2</option>
   <option value="3" data-custom1="paymentC">3</option>
</select>

您可以通过以下操作在模板中获得：

<p ng-bind="$ctrl.getDataCustomFromSelect('colors')"><p>



摆弄这个解决方案：

我希望我正确地理解了您的问题，它解决了问题。
我不太确定我是否理解您试图实现的目标。你能提供一个更完整的例子吗？@Nikolajdallarsen我想做的不是从输入元素中获取“value”属性，而是从data-custom1属性中获取值，该属性的值为payment。嗨，我试图使用select and option更新你的小提琴，但它不起作用。你能帮忙吗？谢谢我已经把你的答案标对了。只是一个问题，不调用js就不可能实现它，对吗？这是不可能的，您只能使用angular访问select值。
<p ng-bind="$ctrl.getDataCustomFromSelect('colors')"><p>