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元素/标记。如果你这样做，他们仍然需要通过角度编译。

即使你没有采用角度方式，在你的例子中尝试操纵DOM的方式对于99.9％的情况也是错误的。 DOM不是字符串，它是树模型。

而是为您的行定义模型并将其与角度ngRepeat绑定。当＆＃34;添加行＆＃34;单击按钮ngClick修改模型，角度将完成剩下的工作。

我不完全确定我是否明白你想要实现的目标，但这是一个简单的例子。

<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

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

1 个答案: