如何使用javascript / jquery中的某個類在HTML頁面上選擇所有角度字段？

Question

我正在嘗試使用Angular服務器端代碼格式化網站HTML中的字段。 我想在HTML頁面上編寫javascript / jquery腳本，以將字段的格式從十進制轉換為小數。 我有JavaScript代碼來執行轉換。 我無法工作的是選擇頁面上的每個文本元素。 我要更改的每個元素都有成分數量類。 但是，當我使用該類選擇元素時，沒有任何結果。 有人能幫我嗎？

首先介紹一些背景知識，因為這將解釋為什么我不只是對控制器進行更改。 我的公司已收到托管在Azure上的Angular JS應用程序。 控制器都是Angular JS。 我們有服務器端源代碼，但是將其編譯為dll，然后將該dll放在Azure上。 當前，我們沒有客戶端的權限將更改發布到dll。 因此，我們不得不編輯HTML頁面（位於Azure上，但在dll之外）。 我需要找到頁面上的所有小數字段並將其轉換為分數。 如我所說，我有一個腳本來進行轉換，但是我不知道如何訪問每個元素。

像這樣創建字段：

                    <table class="component-ingredients-container">
                    <tr ng-repeat-start="component in currentRecipe.Components"
                        ng-show="component.Name">
                        <td>&nbsp;</td>
                        <td class="component-name-cell">
                            <span class="component-name">{{component.Name}}</span>
                        </td>
                    </tr>
                    <tr ng-repeat-end ng-repeat="ingredient in component.Ingredients">
                        <td>
                            <span class="ingredient-amount">{{ingredient.Amount}}</span>
                            <span class="ingredient-unit">{{ingredient.Unit}}</span>
                            <span>{{ingredient.Lookup.Name}}</span>
                            <div class="ingredient-preparation" ng-show="ingredient.Preparation">
                                <span>{{ingredient.Preparation }}</span>
                            </div>
                        </td>
                    </tr>
                </table>

結果是這樣的：

醬

2.5杯西紅柿

.5大湯匙香料

0.125盎司其他

我想獲取這些數字（2.5，.5和.125），以便將其傳遞給我的轉換腳本。

我的第一個嘗試是使用jquery，但是出現一個錯誤，提示未定義$（我嘗試用jquery代替$，結果類似）。 我還嘗試添加帶有指向jquery代碼鏈接的腳本標簽，但未成功。

        $(document).ready(function () {
        try
        {
            $('.ingredient-amount').each(function (ndx) {
                var org = $(this).text();
                console.log("Object:" + org);
            });
        }
        catch (ex)
        {
            console.log("Error:" + ex);
        }
    });

我的結論是Angular或其他代碼正在引起沖突。

我試圖用javascript寫查詢，似乎只找到了類.ingredient-amount的一個實例。

    function r(f){/in/.test(document.readyState)?setTimeout(r,9,f):f()}
r(function () {
    try {
        var divs = document.querySelectorAll('.ingredient-amount');

        [].forEach.call(divs, function (div) {
            try {
                console.log("Inside");
                console.log(divs.text());
            }
            catch (ex) {
                console.log(ex);
            }
        });
    }
    catch (ex) {
        console.log(ex);
    }
});

接下來，我嘗試了不同的方法。 我在跨度標簽中添加了一個ID，並嘗試查找該特定ID。 但是，找不到。 結果為空。

<span class="ingredient-amount" id="amount-{{$index}}">{{ingredient.Amount}}</span>

    function r(f) { /in/.test(document.readyState) ? setTimeout(r, 9, f) : f() }
r(function () {
    console.log("Ready");
    var div = document.getElementById('amount-0');
    console.log("Element: " + div);
    console.log("Got it!");
});

我的結論是我沒有正確選擇這些角場。 我怎樣才能做到這一點？

更新：

我能夠添加一個按鈕並使它工作。 但是，我無法使任何形式的就緒功能正常工作。 我已經嘗試過（1.）准備好jquery文檔； jQuery不起作用，所以很失敗，（2。）最短的就緒，綁定就緒，以及這里的其他幾個： $（document）.ready等效，沒有jQuery （3.）只是將代碼包含在函數之外腳本標簽的最后一部分。

當頁面打開而不需要單擊按鈕時，如何使此代碼起作用？

<button id='btnConvertToFractions' onclick="buttonConvert()">Convert to Fractions</button>


function buttonConvert()
{
    try
    {
        console.log("Convert started");
        var divs = document.querySelectorAll('.ingredient-amount');

        [].forEach.call(divs, function (div) {
            console.log("Before: " + div.textContent);
            div.textContent = Fraction(div.textContent);
            console.log("After: " + div.textContent);
        });
        console.log("Convert finished");
    }
    catch (ex)
    {
        console.log("Error: " + ex);
    }
};

Answer 1

您可以使用 ：

var amounts = document.getElementsByClassName("ingredient-amount");`

此處的示例： jsFiddle

Answer 2

這是我想出的解決方案。 我找到了一個有角度的文檔准備就緒功能，但起初它似乎不起作用。 然后，我在網上找到了添加超時的建議。 結合這些工作。 超時似乎使頁面有時間加載所有角度數據元素（ng-repeat div及其內容）。

    angular.element(document).ready(
    setTimeout(
          function () {
              buttonConvert();
          }
        , 2000));

Answer 3

實現此目的的“角度方法”是編寫自定義過濾器 。

例如：

angular.module('YourModule', []).
  filter('fraction', function() {
    return function(input) {
      var out = "",
          wholeNumber = parseInt(input, 10),
          decimals = input - wholeNumber,
          fraction = '';

      if (decimals === .5) {
        fraction = '1/2';
      }

      return out + wholeNumber + ' ' + fraction;
    }
  });

然后，您可以直接在AngularJS模板中使用過濾器：

<span class="ingredient-amount">{{ingredient.Amount|fraction}}</span>

一點解釋...將要添加到DOM時，將解析View Template HTML中的每個元素。 當AngularJS解析每個元素時，它會查找自定義元素和屬性以及表達式 ：

{{ingredient.Amount}}

Ingredient.Amount的實際值會在元素添加到DOM之前插入到元素中。

我們所要做的就是添加一個過濾器，該過濾器用於格式化Ingredient.Amount的值。