添加帶有樣式和靜態值的下拉列表到angularjs中的表

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> 

鏈接工作codepen：

Example