Angular JS - 绑定自定义 html 属性

Question

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

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

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

为了清楚起见，我不想显示输入元素的 "value"，而是想显示 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>

如果我 select 来自 select 元素的选项，则显示 data-color-hex 在

元素中而不是值 1,2,3.

Answer 1

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

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

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

Answer 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

Answer 3

您首先需要为您的 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 中创建一个方法，其中 returns 来自所选选项的 data-custom1 属性：

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

您可以在模板中执行以下操作：

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

Fiddle 使用该解决方案：https://jsfiddle.net/virgilioafonsojr/b002ccja/

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

Angular JS - 绑定自定义 html 属性

Angular JS - bind a custom html attribute

javascript

angularjs

angular-ngmodel

ng-bind