无法使用 md-select 克隆角度材料元素

Question

我是材料设计的新手。

我正在使用它来开发我的网站。我需要在表的每个 <tr> 标记中使用多个 md-select。

我正在使用 jquery 克隆 <tr> 元素。克隆后我得到了正确的视图。但无法获得我在原始<tr> 标签中获得的下拉元素。

我使用 jquery 来克隆 <tr> 标签。

HTML 代码

<tr class="tr_clone">
  <td>
    <md-input-container class="md-block">
      <md-select name="perperty" ng-model="perperty" required>
        <md-option value="1">A</md-option>
        <md-option value="2">B</md-option>
        <md-option value="3">C</md-option>
        <md-option value="4">D</md-option>
      </md-select>
    </md-input-container>
  </td>
  <td>
    <md-input-container class="md-block">
      <md-select name="source_avalability" ng-model="source_avalability" required>
        <md-option value="1">P</md-option>
        <md-option value="2">Q</md-option>
        <md-option value="3">R</md-option>
      </md-select>
    </md-input-container>
  </td>
  <td>
    <md-input-container id="removeit" class="removeit">
      <input id ="addrownumber" maxlength = "2" name="addrownumber" min="1" max="10" step="1" class="addrownumber" type="number"  value="1" aria-label="rownumber"/>
    </md-input-container>
  </td>
  <td>
    <a href="javascript:void(0)" alt="Add row" class="addrow"><img class="treeimg" src="icons/ic_add_48px.svg" title="Add Row"></a>
    <span style="display:none">|
      <a href="javascript:void(0)" class="deleterow"><img alt="Delete row" src="icons/ic_delete_48px.svg" title="Delete Row">
      </a>
    </span>
  </td>
</tr>

jQuery

$(document).ready(function() {
  //Add a row in a table
  $(document).on('click', 'a.addrow', function(e) {
    e.preventDefault();
    var $tr = $('.tr_clone').html();
    console.log($tr);
    var addRowNumber = $('.addrownumber').val();
    console.log("Row Numebr :: " + addRowNumber);
    //var $clone = $tr.clone();
    var row = $tr;
    var startIndex = row.indexOf('<md-input-container id="removeit"');
    var delete_row = '<a href="javascript:void(0)" class="deleterow">';
    var endIndex = row.indexOf(delete_row);
    var removeStr = row.substring(startIndex, endIndex);
    console.log("Remove string :: " + removeStr);
    row = row.replace(removeStr, '</td><td><span>');
    for (var i = 1; i <= addRowNumber; i++) {
      $('#tlog tr:last').after('<tr>' + row + '</tr>');
    }
  });
});

是否可以在材料设计中克隆具有所有价值的 md-select？

Answer 1

您应该尝试以角度方式执行此操作，尽量不要使用 jQuery 添加/修改 angular 或 angular-material 元素/标签。如果这样做，它们仍然需要通过 angular 编译。

即使您不以角度方式进行操作，您尝试在示例中操作 DOM 的方式在 99.9% 的情况下都是错误的。 DOM 不是字符串，而是树模型。

改为为您的行定义一个模型并将其与 Angular 的 ngRepeat 绑定。当单击“添加行”按钮ngClick 时，您可以修改模型，其余的将由 Angular 完成。

我不完全确定我是否理解您想要实现的目标，但这是一个简单的示例。

<div flex ng-app="app" ng-controller="rowController">
    <md-list ng-repeat="r in rows track by $index">
        <md-list-item>
            <div flex class="md-list-item-text" layout="row" layout-align="center start">
                <div flex layout="row">
                    <md-input-container flex="50">
                        <label>perpety</label>
                        <md-select name="perperty" ng-model="r.perperty" required>
                            <md-option ng-repeat="p in rowModel.perperty track by $index" ng-value="p" ng-bind="p" />
                        </md-select>
                    </md-input-container>
                    <md-input-container flex="50">
                        <label>source availability</label>
                        <md-select name="sourceAvalability" ng-model="r.sourceAvalability" required>
                            <md-option ng-repeat="s in rowModel.sourceAvalability track by $index" ng-value="s" ng-bind="s" />
                        </md-select>
                    </md-input-container>
                </div>
                <md-input-container flex="10" ng-if="$index === 0">
                    <label>row count</label>
                    <input name="addRowCount" ng-model="rowModel.addRowCount" step="1" min="1" max="10" type="number" />
                </md-input-container>
                <md-button ng-if="$index === 0" class="md-primary md-raised" ng-click="addRows()">Add row</md-button>
                <md-button ng-if="$index > 0" class="md-warn md-raised" ng-click="removeRow($index)">Delete row</md-button>
            </div>
        </md-list-item>
    </md-list>
</div>

还有 javascript 代码：

var app = angular.module('app', ['ngMaterial']);

app.controller('rowController', function($scope) {
  // the model for the rows with possible options for each column
  $scope.rowModel = {
    perperty: ['A', 'B', 'C', 'D'],
    sourceAvalability: ['P', 'Q', 'R'],
    addRowCount: 1
  };

  // template row object
  var row = {
    perperty: 'A',
    sourceAvalability: 'P'
  };

  // start with one row in an array
  $scope.rows = [row];

  // add new row(s)
  $scope.addRows = function() {
    for (i = 0; i < $scope.rowModel.addRowCount; i++) {
      $scope.rows.push(row);
    }
  };

  // remove the row with the specified index
  $scope.removeRow = function(index) {
    $scope.rows.splice(index, 1);
  };
});

codepen