Question

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

我的问题是，是否可以单独使用html绑定自定义属性？具体来说就是select元素。

我想从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>

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

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

Answer 1

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

JButton btnCheck = new JButton("Check");
btnCheck.addActionListener(new ActionListener() {
    public void actionPerformed(ActionEvent arg0) {
        int count = 0;
        try{
            String conn = "select instrument, period, adminNo from reservation "
                        + "where adminNo = '" + txtAdmin.getText() + "'"; 
            PreparedStatement pst = sqliteConnection.dbConnector().prepareStatement(conn);
            ResultSet rs = pst.executeQuery();
            while(rs.next()) {
                count++;
                String adminNo = rs.getString("adminNo");
                if(txtAdmin.getText().equals(adminNo)){
                    System.out.println("Admin number from text: " + txtAdmin.getText() + "Admin number from DB: " + adminNo);
                lblDisplayMusicalInstrument.setText(rs.getString("instrument"));
                lblDisplayDuration.setText(rs.getString("period"));
                }
            }
        } catch(Exception e) {
            e.printStackTrace();
        }
        if(count == 0) {
            JOptionPane.showMessageDialog(null, "Admin not in database");
        }

    }
});

或者使用ngAttr：

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

<p>{{payment}}<p>

后者用于挑选DOM API，如SVG DOM API。您可以在此处阅读更多内容：https://docs.angularjs.org/guide/interpolation

Answer 2

您首先需要为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/

我希望我能正确理解你的问题并解决了这个问题。

Answer 3

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

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

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

Angular JS - 绑定自定义html属性

3 个答案: