无法通过 jQuery 选择器读取来自 HTML 的表 td答案

【问题标题】：Unable to read table td valued from HTML through jQuery selector无法通过 jQuery 选择器读取来自 HTML 的表 td
【发布时间】：2018-09-15 08:11:47
【问题描述】：

为了创建表格，我使用 ng-repeat 来呈现表格行。 onchange of dropdown 我正在调用一个函数，该函数将根据该条件运行有一些条件我将一个对象推送到绑定到范围变量的数组。

我的 HTML

<div class="col-md-12" >

    <div class="portlet light" >
      <div class="portlet-title">
        <div class="caption">Installment Structure </div>
      </div>

      <div class="portlet-body">
        <div class="row">
          <div class="col-md-12">
            <table id="instalmentStructure" class="table table-bordered">
              <tbody>
                <tr>
                  <th style="width:20%;">From Installment
                  </th>
                  <th style="width:20%;">To Installment</th>

                  <th  style="width:20%;">Installment Amount
                  </th>

                  <th style="width:20%;"></th>
                </tr>
                <tr class="quoteVal" ng-repeat="item in installmentLists">
                  <td >{{item.fromInst}}</td>
                  <td >{{item.toInst}}</td>

                  <td contenteditable="true" class="quoteVal">{{item.amtInst}}</td>

                  <td>
                    <span class="col-md-6">
                      <center>
                        <a ng-click="editRecord(item,$index)">
                          <i class="fa fa-pencil"></i>
                        </a>
                      </center>
                    </span>
                    <span class="col-md-6">
                      <center>
                        <a ng-click="deleteRecord(item,$index)">
                          <i class="fa fa-trash"></i>
                        </a>
                      </center>
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>


  </div>

我的控制器代码：

$scope.createInstallments = function () {
    console.log("will create installments");
    if (trialCalculCntrl.emiCalQde.bulletFreq == 12) {
        console.log("Bullet Frequency is Yearly");
        var bulletFreq = trialCalculCntrl.emiCalQde.bulletFreq;
        $scope.installmentLists = [];
        $scope.installmentObj = {
            'fromInst': "",
            'toInst': "",
            'amtInst': ""
        };
        var remainder = tenure % 12;
        if (remainder == 0) {
            var numofrows = ((tenure * 2) / 12).toFixed(0);
            for (var i = 1; i <= numofrows; i++) {

                if (i == 1) {
                    $scope.installmentObj = {
                        'fromInst': i,
                        'toInst': bulletFreq - 1,
                        'amtInst': ""
                    };
                    $scope.installmentLists.push($scope.installmentObj);
                } else if (i % 2 == 0) {

                    console.log("EVEN i: ", i);
                    var preval = $('tr.quoteVal').eq(i - 2).find('td:eq(1)').text();
                    console.log("Previous Val ", preval);

                } else {
                    console.log("ODD i: ", i);
                    // var preval = $('tr.quoteVal').eq(i-1).find('td:eq(2)').text();
                    // console.log("Previous Val ",preval);
                }
            }
            console.log("Instalment list : ", $scope.installmentLists);
        } else {
            var numofrows = (((tenure * 2) / 12) + 1).toFixed(0);
            for (var i = 0; i < numofrows; i++) {
                $scope.installmentObj = {
                    'fromInst': "",
                    'toInst': "",
                    'amtInst': ""
                };
                $scope.installmentLists.push($scope.installmentObj);
            }
            console.log("Instalment list : ", $scope.installmentLists);
        }



    }
};

在第一次运行后的 for 循环中，我将对象推送到 $scope.installmentLists 数组，但它没有显示在 HTML 中，因此我无法在第二次运行 for 循环时读取数组对象。我正在使用 jQuery 选择器来读取，所以 console.log("Previous Val ", preval); 给了我一个空字符串。

【问题讨论】：

不要混合使用 angularjs 和 jquery。一路运行angularjs
$scope.installmentLists = [];删除 form($scope.createInstallments) 函数并在控制器中声明（全局）

标签： javascript jquery html angularjs angular

【解决方案1】：

当更改 $scope 时，将关于 console.log 的 jquery 放在 setTimeout 中。否则 jquery 选择器不会返回预期，因为 HTML 尚未呈现。

setTimeout(function() {
  onsole.log("EVEN i: ", i);
  var preval = $('tr.quoteVal').eq(i - 2).find('td:eq(1)').text();
  console.log("Previous Val ", preval);
}, 500);

【讨论】：