Question

我在angularjs应用程序中工作，我必须在表中添加和删除一行。我的html就像下面的

<table class="table table-striped table-bordered table-hover dataTables-example dataTable" id="Table1" aria-describedby="DataTables_Table_0_info" role="grid">
                            <thead>
                                <tr role="row">
                                    <th width="256" colspan="1" rowspan="1" style="width: 240px;">Ind Type</th>
                                    <th width="942" colspan="1" rowspan="1" style="width: 297px;">Color Coding</th>
                                    <th width="942" rowspan="1" style="width: 297px;">Estimate %</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="gradeA odd" role="row">
                                    <td class="sorting_1">
                                        <input type="text" class="form-control" placeholder=""></td>
                                    <td>
                                        <select class="form-control">
                                            <option>-- Select --</option>
                                            <option style="color: Black">Black</option>
                                            <option style="color: Blue">Blue</option>
                                            <option style="color: Red">Red</option>
                                            <option style="color: Orange">Orange</option>
                                            <option style="color: Brown">Brown</option>
                                            <option style="color: Green">Green</option>
                                            <option style="color: Purple">Purple</option>
                                            <option style="color: Cyan">Cyan</option>
                                            <option style="color: Magenta">Magenta</option>
                                        </select>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" placeholder=""></td>
                                </tr>
                            </tbody>
                            <tfoot>
                            </tfoot>
                        </table>

所以我想在angularjs代码中添加/删除。现在，如何使用所有此默认样式和选定的下拉属性值创建属性？

Answer 1

在您的javascript代码中：

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

app.controller('myCtrl',function($scope){
   $scope.elements = [
     {id:1},
     {id:2}
   ];
    $scope.colors = [
      "black", 
      "blue",
      "red",
      "orange",
      "brown",
      "green",
      "purple"
    ];
    $scope.selectedColor =  $scope.colors[0];

    $scope.addElement = function() {
        var mock = {id: $scope.elements.length + 1};
        $scope.elements.push(mock)
    }
    $scope.removeElement = function(index) {
        $scope.elements.splice(index, 1)
    }
});

在你的HTML代码中：

<div ng-app="myApp" ng-controller="myCtrl">
  <table class="table table-striped table-bordered table-hover dataTables-example dataTable" id="Table1" aria-describedby="DataTables_Table_0_info" role="grid">
    <thead>
      <tr role="row">
        <th width="256" colspan="1" rowspan="1" style="width: 240px;">Ind Type</th>
        <th width="942" colspan="1" rowspan="1" style="width: 297px;">Color Coding</th>
        <th width="942" rowspan="1" style="width: 297px;">Estimate %</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="elem in elements" class="gradeA odd" role="row">
        <td class="sorting_1">
          <input type="text" class="form-control" placeholder=""></td>
        <td>
          <select ng-model="selectedColor">
  <option ng-repeat="color in colors" ng-style="{'color':color}" >{{color}}</option>     
</select>
        </td>
        <td>
          <input type="text" class="form-control" placeholder="">
        </td>
        <td>
          <input type="button" value="delete" ng-click="removeElement($index)">
        </td>
      </tr>
    </tbody>
    <tfoot>
    </tfoot>
  </table>
  <input type="button" value="add" ng-click="addElement()">
</div>
</div>

工作代码的

链接：

Example

将样式和静态值的下拉列表添加到angularjs中的表

1 个答案: