Angular JS - 绑定自定义 html 属性答案

【问题标题】：Angular JS - bind a custom html attributeAngular JS - 绑定自定义 html 属性
【发布时间】：2017-08-05 20:21:13
【问题描述】：

我刚开始使用 Angular JS，我发现它在数据处理方面非常方便。

我的问题，是否可以单独通过 html 绑定自定义属性？特别是选择元素。

我想从 select 元素下的选项标签中获取自定义属性，而不是获取 value 属性。

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

例如：

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

如果我从选择元素中选择一个选项，则会显示 data-color-hex 在

元素而不是值 1,2,3。

【问题讨论】：

我不太确定我是否理解您想要实现的目标。您能否提供一个更完整的示例？
@NikolajDamLarsen 我想做的不是从输入元素中获取“值”属性，而是从具有支付值的 data-custom1 属性中获取值。跨度>

标签： javascript angularjs angular-ngmodel ng-bind

【解决方案1】：

您首先需要为您的select 设置一个name：

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

然后，您可以在 ctrl 中创建一个方法，该方法从所选选项返回 data-custom1 属性：

$ctrl.getDataCustomFromSelect = function(selectName) {
  return document.querySelector('select[name="' + selectName + '"] option:checked')
    .getAttribute('data-custom1');
}

您可以在模板中这样做：

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

摆弄那个解决方案：https://jsfiddle.net/virgilioafonsojr/b002ccja/

我希望我正确理解了您的问题并解决了问题。

【讨论】：

嗨，我尝试将您的小提琴更新为使用选择和选项，但它不起作用。你能帮我吗？ jsfiddle.net/t4Lhr385
谢谢！我已经将您的答案标记为正确。只是一个问题，不调用js就不能实现吧？
不可能，只能使用angular访问选择值。

【解决方案2】：

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

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

<p>{{payment}}<p>

或者通过使用 ngAttr:

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

<p>{{payment}}<p>

后者用于挑剔的 DOM API，例如 SVG DOM API。你可以在这里阅读更多：https://docs.angularjs.org/guide/interpolation

【讨论】：

【解决方案3】：

如果你想得到输入值，你必须使用ng-model，只有这个。

然后，在你的 controller.js 中，从 ng-model 获取输入值。

（不知道是不是你想知道的）

【讨论】：