Question

我过去4个小时一直在努力奋斗！：d

问题是我正在尝试使用输入文本构建表单并动态地获取行。像这样：

</div>
                <a ng-click="add_row()" id="add_row(colname,coltype)" class="btn btn-success pull-left">Add Row</a><a ng-click="delete_row()" id='delete_row' class="pull-right btn btn-danger">Delete Row</a>
              </div>

这是我的整个html表+按钮：

<div class="col-md-12 column">
                    <table class="table table-striped" id="tab_logic" >
                      <colgroup>
                        <col span="1" style="width: 5%;">
                        <col span="1" style="width: 45%;">
                        <col span="1" style="width: 50%;">
                      </colgroup>
                      <thead>
                        <tr >
                          <th class="text-center">
                              #
                          </th>
                          <th class="text-center">
                              Column Name
                          </th>
                          <th class="text-center">
                              Column Type
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr id='addr0'>
                          <td class="text-center">
                              1
                          </td>
                          <td>
                            Column Name
                          </td>
                          <td>
                            Column Type
                          </td>
                        </tr>
                        <tr ng-repeat="col in cols">
                          <tr id='addr1'></tr>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <a ng-click="add_row(colname,coltype)" id="add_row" class="btn btn-success pull-left">Add Row</a><a ng-click="delete_row()" id='delete_row' class="pull-right btn btn-danger">Delete Row</a>
              </div>

我的js部分是：

$scope.cols = { colnames: [] , coltypes: [] };
   var i=1;
  $scope.add_row = function(colname,coltype) {
      $('#addr'+i).html("<td class='text-center'>"+ (i+1) +"</td><td><input ng-repeat='colname in cols.colnames track by $index'  data-ng-model='colname' name='colname"+i+"' type='text' placeholder='New Column Name'  class='form-control'></td><td><input ng-repeat='coltype in cols.coltypes track by $index'  data-ng-model='coltype' name='coltype"+i+"' type='text' placeholder='New Column Type'  class='form-control'></td>");
      $scope.cols.colnames.push({colname:$scope.colname});
      $scope.cols.coltypes.push({coltype:$scope.coltype });
      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
  }
  $scope.delete_row = function() {
         if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
  }

所以你看，它是动态生成内部html。现在的问题是这些colnames和coltypes没有得到反映实际上我在通过一些$ http调用发布的json中看到的是“未定义”。

请让我知道在这个问题上真的很难挣扎，一切都是徒劳的。

TIA！

Answer 1

你写错了语法。请更正。

<a ng-click="add_row(colname,coltype)" id="add_row" class="btn btn-success pull-left">Add Row</a><a ng-click="delete_row()" id='delete_row' class="pull-right btn btn-danger">Delete Row</a>

请检查此代码

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-controller="ctrl">
<div class="col-md-12 column">
                    <table class="table table-striped" id="tab_logic" >
                      <colgroup>
                        <col span="1" style="width: 5%;">
                        <col span="1" style="width: 45%;">
                        <col span="1" style="width: 50%;">
                      </colgroup>
                      <thead>
                        <tr >
                          <th class="text-center">
                              #
                          </th>
                          <th class="text-center">
                              Column Name
                          </th>
                          <th class="text-center">
                              Column Type
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr ng-repeat="col in cols">
                          <td>{{$index}}</td>
                          <td><input placeholder="Column name" ng-model="col.colname" /></td>
                          <td><input placeholder="Column type" ng-model="col.coltype" /></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <a ng-click="add_row()" id="add_row" class="btn btn-success pull-left">Add Row</a><a ng-click="delete_row()" id='delete_row' class="pull-right btn btn-danger">Delete Row</a>
              </div>
<script>
  angular.module('app', []).controller('ctrl', function($scope){
    $scope.cols = [];
    $scope.add_row = function() {
      $scope.cols.push({colname: '', coltype: ''});
    }
    $scope.delete_row = function() {
      $scope.cols.splice($scope.cols.length - 1, 1)
    }
  })
</script>
</body>
</html>

Answer 2

有一些问题。首先，你在cols上做 ng-repeat 这是一个对象我删除了jquery以使其更简单并使用 corejs 和角度只是为了达到这个目的。在输入类型上使用 ng-repeat ，并从您需要执行的每个输入中获取值，例如 ng-model =“cols。 colnames [$ index]“和coltype ng-model =”cols.coltypes [$ index]“相同。 尝试使用此代码保持角度简单！

    <div class="col-md-12 column" ng-app="app" ng-controller="ctrl">
        <table class="table table-striped" id="tab_logic">
            <colgroup>
                <col span="1" style="width: 50%;">
                    <col span="1" style="width: 50%;">
            </colgroup>
            <thead>
                <tr>

                    <th class="text-center">
                        Column Name
                    </th>
                    <th class="text-center">
                        Column Type
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class='text-center'>
                        <input class='form-control' name='coltype"+i+"' ng-repeat="colname in cols.colnames track by $index" type="text" ng-model="cols.colnames[$index]">{{colName}}
                    </td>
                    <td class='text-center'>
                        <input class='form-control' name='coltype"+i+"' ng-repeat="colname in cols.coltypes track by $index" type="text" ng-model="cols.coltypes[$index]">{{colName}}
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <a ng-click="add_row()" id="add_row" class="btn btn-success pull-left">Add Row</a>
            <a ng-click="delete_row()" class="pull-right btn btn-danger">Delete Row</a>
        </div>
    </div>

 <script>
      angular.module('app', []).controller('ctrl', function($scope){
        $scope.cols = { colnames: [] , coltypes: [] };
        console.log($scope.cols)
       var i=1;
      $scope.add_row = function(colname,coltype) {
          $scope.cols.colnames.push($scope.colName);
          $scope.cols.coltypes.push($scope.coltype);
        console.log($scope.cols.colname)   
      }
      $scope.delete_row = function() {
             $scope.cols.colnames.pop();
               $scope.cols.coltypes.pop();         
      }
      })

</script>

Answer 3

使用angular处理这种代码的正确方法是调整保存数据的数组，并允许angular渲染数据。无需操纵HTML。

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.cols = [{}];

  $scope.add_row = function() {
    $scope.cols.push({});
  };

  $scope.delete_row = function(row) {
    $scope.cols.splice(row, 1);
  };

});

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <table>
    <colgroup>
      <col span="1" style="width: 5%;" />
      <col span="1" style="width: 45%;" />
      <col span="1" style="width: 45%;" />
    </colgroup>
    <thead>
      <tr>
        <th class="text-center">
          #
        </th>
        <th class="text-center">
          Column Name
        </th>
        <th class="text-center">
          Column Type
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="col in cols track by $index">
        <td>{{$index+1}}</td>
        <td>
          <input ng-model="col.colname">
        </td>
        <td>
          <input ng-model="col.coltype"><a href="" ng-click="delete_row($index)">Delete</a>
        </td>
      </tr>
    </tbody>
  </table>
  <a href="" ng-click="add_row()">Add New Row</a>

  <div ng-repeat="col in cols">
    {{$index}} - {{col.colname}} - {{col.coltype}}
  </div>
</body>

</html>

＆＃13;

正如您所看到的，我们的角度代码只是在添加时向数组添加一个空行，并在删除时将行拼接到特定的$index。 Angular可以根据需要为每行中的对象添加适当的属性。

http://plnkr.co/edit/L2HwAIiR13dectc5QmCJ?p=preview

ng repeat不说列未定义

3 个答案: