实施例

Question

我在我的Symfony2应用程序中使用了一个包，它正在使用Angular标记：

...some table structure

<th ng-repeat="column in columns" ng-show="column.visible">
    <input ng-if="column.filter != false" ng-model="params.filter()[column.index]" type="text" name="{{ column.index }}" value="" class="form-control input-sm" />
</th>

我不允许更改此捆绑包的代码，但我需要选择此ng-repeat的第二个input的{{1}}（我使用jQuery）。它在输入元素中的名称是th。我设法选择了所有输入：

name="_domain"

但这不是：

$('#translation-grid table thead tr th input')

或者这个：

$('#translation-grid table thead tr th input[name=_domain]')

......正在运作。我只找到了需要更改角度标记的解决方案，但我不能这样做。我只需要选择此$('#translation-grid table thead tr th:nth-child(2) input')。

Answer 1

jquery选择器没什么问题。我在评论中的意思是它可能执行得太早（在ng-repeat / ng-if / and-what-else-you-are-using-on-the-page完成之前）。

打开页面，打开控制台并输入类似$('#translation-grid table thead tr th input').css('background-color', 'yellow')的内容。如果这样可行，你几乎肯定会很快执行选择器。检查是否是这种情况的另一种简单方法是在选择器之前插入一个简单的alert。这将阻止当前的摘要，如果该表在那时没有在 DOM 中呈现，那么jquery也无法找到它。

如果您在指令中执行此操作，可能需要尝试将其移至帖子 link功能或将priority设置为负值。否则，请尝试将其包装到$timeout调用中，而不设置延迟，这会将语句排队，直到当前摘要周期结束后。

$timeout(function() {
    $('#translation-grid table thead tr th input')
      .css('background-color', 'yellow');
});

实施例

以下示例尝试使用4列高亮显示。

直接在控制器中：不起作用
排队$ timeout：工作
直接来自指令：没有工作
通过克隆按钮从用户界面：工作

可以找到Plunker here。

＆＃13;

// Code goes here

function highlite(index, color) {
  alert('Trying to highlite column ' + index + ' with color ' + color);
  $('.table th:nth-child(' + index + ')').css('background-color', color);
}

var app = angular.module('app', []);

app.controller('MyController', function($scope) {

  $scope.columns = [
    'First Name', 'Last Name', 'Username', 'Age', 'Sex'
  ];

  $scope.rows = [
    ['Mark', 'Otto', '@mdo', 10, true],
    ['Jacob', 'Thornton', '@fat', 20, false],
    ['Larry', 'the Bird', '@twitter', 30, true]
  ];

  // Expose highlite function to view 

  $scope.highlite = highlite;

  // This does not work; both the directive template and the ng-repeat
  // hasn't been executed yet.

  highlite(1, 'purple');

});

app.directive('myTable', function($timeout) {

  return {
    restrict: 'AE',
    template: '<table class="table">' +
                '<thead>' +
                  '<tr>' +
                    '<th ng-repeat="column in columns">{{ column }}</th>' +
                  '</tr>' +
                '</thead>' +
                '<tbody>' +
                  '<tr ng-repeat="row in rows">' +
                    '<td ng-repeat="field in row">' +
                      '{{ field }}' +
                    '</td>' +
                  '</tr>' +
                '</tbody>' +
              '</table>',
    scope: {
      columns: '=',
      rows: '='
    },
    link: function($scope, $element) {

      // This won't work either; the ng-repeat hasn't fired yet

      highlite(3, 'blue');

      // ... but this will: queue the provided function to execute when
      // the current digest cycle has been finished (after the ng-repeat).

      $timeout(function() {
        highlite(4, 'orange');
      });
    }
  };
});

＆＃13;

<link rel="stylesheet" 
      href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

<div ng-app="app" ng-controller="MyController" class="container">
  <h1>Hello Plunker!</h1>

  <my-table columns="columns" 
            rows="rows">
  </my-table>

  <!-- 
    This will work because the select statement is 
    executed after the ng-repeat has finisched 
  -->
  
  <button class="btn btn-primary" 
          ng-click="highlite(2, 'yellow')">
    Click me!
  </button>
</div>

＆＃13;

Answer 2

为什么不$('#translation-grid table thead tr th input')[1]？由于您可以选择所有元素，因此您也可以在数组中选择一个元素。

要使用$ index，需要通过包含自定义数据属性（例如data-index="{{$index}}"）来修改角度。这会将data-index属性赋值给元素，其值等于ng-repeat循环中的索引，因此您可以使用表达式$('#translation-grid table thead tr th input[data-index=1]')在jquery中引用此属性。

选择使用AngularJS＆＃39; s-repeat的第二个孩子

2 个答案:

实施例