Question

是否可以使用JQuery选择Angular标签？我使用的是ui-select Angular组件，它插入HTML页面中，如下所示：

<ui-select ng-model="rec.currencyCode" on-select="ctrl.selectCurrencyCode(rec, $item)">
    <ui-select-match placeholder="{{ 'SelectCurrency' | resource:'GuiText' }}">
        <span ng-bind="$select.selected"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in ctrl.currencies">
        <span ng-bind-html="item.codeA3"></span><br />
    </ui-select-choices>
</ui-select>

当我尝试使用JQuery选择标记时，这两个选择器找不到元素：

$("ui-select").each(function () {
}

$("select").each(function () {
}

更新即可。使用JQuery的代码是从一个打字稿控制器运行的：

    validate(): boolean {
        var that = this;

        this.errors = [];

        var inputs = $("input[format='number']");
        inputs.each(function () {
            var str = $(this).val();
            if (str != null && str.length > 0) {
                var val = parseFloat(str);
                if (isNaN(val)) {
                    that.addError($(this).parent().attr("val-property"), "Hodnota není číslo");
                }
            }
        });

        var currencyCodes = $("ui-select");
        currencyCodes.each(function () {
            var str = $(this).val();
            console.log(this);
            console.log(str);
            if (str == null) {
                that.addError($(this).parent().attr("val-property"), "Není zadána měna");
            }
        });

        return this.errors.length == 0;
    }

Answer 1

我的错误，ui-select元素被带有div元素的angular取代，因此组合框实际上没有select元素。

<div class="currencyCode ui-select-container ui-select-bootstrap dropdown ng-valid" ng-class="{open: $select.open}" ng-model="rec.currencyCode" on-select="ctrl.selectCurrencyCode(rec, $item)" data-original-title="" title="">
...

Answer 2

(function() {


    var angularTag = $("ui-select");
    angularTag.each(function() {
      $('.result').html('DOM length:' + angularTag.length);
      console.log(angularTag);
    });


})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ui-select ng-model="rec.currencyCode" on-select="ctrl.selectCurrencyCode(rec, $item)">
  <ui-select-match placeholder="{{ 'SelectCurrency' }}">
    <span ng-bind="$select.selected"></span>
  </ui-select-match>
  <ui-select-choices repeat="item in ctrl.currencies">
    <span ng-bind-html="item.codeA3"></span>
    <br />
  </ui-select-choices>
</ui-select>


<div class="result"></div>

使用JQuery选择角度标记

2 个答案: