代码之家 › 专栏 › 技术社区 › cattarantadoughan

Angular JS-绑定自定义html属性

ng-bind angular-ngmodel angularjs javascript

1

cattarantadoughan · 技术社区 · 7 年前

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

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

需要明确的是,我不想显示输入元素的“值”,而是想显示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>

在

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

3 回复 | 直到 7 年前

1

Virgilio Afonso Jr. 7 年前

你首先需要设置一个 name 为了您的 select :

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

2

1

Sven 7 年前

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

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

<p>{{payment}}<p>

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

<p>{{payment}}<p>

https://docs.angularjs.org/guide/interpolation

3

0

ElíasMarNev 7 年前

你必须使用ng模型 ,只有这个。

然后,在控制器中。js,从ng模型中获取输入值。