Question

我有一个方法，我遍历一个数组，使用ng-repeat并将每个项目与下拉列表中的值配对。

这是该方法的一个方面：

<header>
    <title>myTittle</title>
</header>
<body ng-app='myApp' ng-controller='myController'>
    <div class="col-md-10 col-md-offset-1">
        <div>
            <form>
                <table class="table  table-striped">
                    <thead>
                        <th>From File</th>
                        <th>Map To</th>
                    </thead>
                    <tr class="selector-row" ng-repeat="(key,value) in List1">
                        <td><span id="myspan">{{value}}</span>

                        </td>
                        <td style="padding:10px;">
                            <select name="repeatSelect" id="repeatSelect" ng-model="data[value]" class="form-control">
                                <option ng-repeat="(key,value) in Match" value="{{value}}">{{value}}</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </form>{{ data }}</div>
    </div>
</body>

var app = angular.module('myApp', [])
app.controller('myController', ['$scope', function ($scope) {
    $scope.data = {};

    $scope.List1 = ['product1', 'product2', 'product3', 'product4', 'product5'];
    $scope.Match = ['match1', 'match2', 'match3', 'match4', 'match5'];
}])

我的挑战是我希望能够让用户点击像＆＃34;添加＆＃34;任何行中的链接和1）创建该行的副本，然后2）从选择列表中选择一个不同的值。

Answer 1

你只需要添加一个＆＃34;添加行＆＃34;最后一个按钮，并在控制器中将新值推送到List1。在此处查看fiddle的更新。

$scope.addRow = function(){
    var len = $scope.List1.length;
    $scope.List1.push('product'+(len+1));
}

在你的桌子后面，添加一个调用上述功能的按钮：

   </table>
   <button ng-click="addRow()">Add a row</button>

Answer 2

角度中的Dublicate行是可能的。我给出了一个dublicate行的示例代码

index.html部分：

<body ng-controller="MyCtrl">
  <div style="padding: 10px;">
    <h2>Languages</h2>
    <br/>
    <div style="width: 90%; display: inline-block; border: 1px silver dotted;">
      <div class="row">
        <div class="col-xs-3">
          <select class="form-control" ng-init="nativeLanguage.level = 'Native'" data-ng-model="nativeLanguage.level" tooltip="Level">
            <option value="Native" ng-selected="true">Native</option>
          </select>
        </div>
        <div class="col-xs-4">
          <select class="form-control" data-ng-model="nativeLanguage.name" tooltip="Language">
            <option value="">Language</option>
            <option value="EN">English</option>
            <option value="IT">Italian</option>
            <option value="DE">German</option>
            <option value="FR">French</option>
          </select>
        </div>
        <div class="col-xs-3">
          <input type="text" data-ng-model="nativeLanguage.remark" class="form-control" placeholder="Remark" tooltip="Remark">
        </div>
        <div class="col-xs-2">

        </div>
      </div>
      <div select-last ng-repeat='language in languages'></div>
    </div>
    <a class="btn" style="margin-bottom: 27px;" href="#" tooltip="Add" ng-click='addRow()'>
      <i class="glyphicon glyphicon-plus"></i>
    </a>
    <pre>{{nativeLanguage | json}}</pre>
    <pre>{{languages | json}}</pre>
  </div>
</body>

</html>

ap.js part：

var myApp = angular.module('myApp',[]);
myApp.directive('selectLast', function () {
    return {
        restrict: 'A',
        transclude: true,
        templateUrl: 'language.html',
        /*scope: {
          level: '=',
          name: '=',
          remark: '='
        },*/
        replace: true
    };
});

function MyCtrl($scope) {
    $scope.languages = [];
    /*var nativeLanguage = {
        level: $scope.hr.language.level,
        name: $scope.hr.language.name,
        remark: $scope.hr.language.remark
    };*/
    $scope.languages.push($scope.nativeLanguage);

    $scope.addRow = function(){
        var newLanguage = {
          level: $scope.level,
          name: $scope.name,
          remark: $scope.remark
        };
        $scope.languages.push(newLanguage);
        console.log('+ clicked');
    };

    $scope.deleteRow = function(rowNo) {
        /*$scope.items.splice($scope.newitem);*/
        $scope.languages.splice(rowNo, 1);
        console.log('- clicked in row ' + rowNo);
    };
}

在Angular中有一种方法可以在ng-repeat中创建重复的行吗？

2 个答案: