采用了棱角分明的js

追加HTML内部元素表中，这是我的HTML采用了棱角分明的js

<body> 
    <div ng-app="tham" ng-controller="tham-control"> 
     <div class="container"> 
      <table class="table table-bordered table-striped"> 
       <thead> 
        <tr>`enter code here` 
         <th>Sl.No</th> 
         <th>Product</th> 
         <th>Cost</th> 
         <th>Quantity</th> 
         <th>Total</th> 
         <th>Action</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr class="items"> 
         <td><input type="number" ng-model="slno"/></td> 
         <td><input type="number" ng-model="product"/></td> 
         <td><input type="number" ng-model="cost"/></td> 
         <td><input type="number" ng-model="quantity"/></td> 
         <td><input type="number" ng-model="total" value="{{ cost*quantity }}"/></td> 
         <td><button ng-click="add_row()" >Add</button></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</body>

这是我的角的js和jQuery

<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script> 
<script type="text/javascript" src="js/angular.min.js" ></script> 
<script> 
    // filter can be added using pipe charcter 
    var app = angular.module("tham",[]); 
    app.controller("tham-control",function($scope){ 
     $scope.cost = 0; 
     $scope.quantity = 0; 
     $scope.total = 0; 
     $scope.add_row = function(){ 
      $this = $(this); 
      var html = $this.parents('tr.items').html(); 
      var new_html = "<tr class='items'>"+html+"</tr>"; 
      $this.parents('tbody').append(new_html); 
     } 
    }); 
</script>

这里我想要做的是，当我点击“添加“按钮然后我想添加”tr.items“行到”tbody“标签使用Angular Js。有人请纠正这个问题，如果不是。

来源

2015-10-13 Thameem

你不需要这个jQuery。你必须为你的物品创建一个数据源，让角度重复它。

<div ng-app="tham" ng-controller="ThamController as thc"> 
    <div class="container"> 
     <table class="table table-bordered table-striped"> 
      <thead> 
       <tr> 
        <th>Sl.No</th> 
        <th>Product</th> 
        <th>Cost</th> 
        <th>Quantity</th> 
        <th>Total</th> 
        <th>Action</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr class="items" ng-repeat="it in thc.items"> 
        <td><input type="text" ng-model="it.slno"/></td> 
        <td><input type="text" ng-model="it.product"/></td> 
        <td><input type="number" ng-model="it.cost"/></td> 
        <td><input type="number" ng-model="it.quantity"/></td> 
        <td><input type="number" ng-value="it.cost * it.quantity"/></td> 
        <td><button ng-click="thc.addRow()" ng-show="$last" class="btn btn-primary">Add</button></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>

var app = angular.module("tham", []); 

app.controller("ThamController", [function() { 
    var _self = this; 

    this.items = []; 
    this.addRow = function() { 
     _self.items.push({ 
      slno: '', 
      product: '', 
      cost: 0, 
      quantity: 0 
     }); 
    }; 
    this.addRow(); 
}]);

看到工作example

来源

2015-10-13 19:13:32 pbaris

非常感谢@pbaris。这正是我想要的。但我没有得到这个逻辑。我知道jQuery和JavaScript，但我是一个成角度的begginer。所以你可以请建议我一个很好的文档来学习所有这些东西。 – Thameem

http://www.tutorialspoint.com/angularjs和https://thinkster.io/a-better-way-to-learn-angularjs这是一个好开始 – pbaris

谢谢@pbaris .... – Thameem

你只是在做Angular应该完成的opossite。

你所创建的项目信息库，即使是空白的，之后，你应该通过项目迭代并打印出来的第一：

var app = angular.module("tham", []); 
 
app.controller("tham-control", function($scope) { 
 
    $scope.items = []; //Initialize Repository 
 
    $scope.cost = 0; 
 
    $scope.quantity = 0; 
 
    $scope.add_row = function() { 
 
    //Add item to the repository 
 
    $scope.items.unshift({ 
 
     'slno': $scope.slno, 
 
     'product': $scope.product, 
 
     'cost': $scope.cost, 
 
     'quantity': $scope.quantity 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body> 
 
    <div ng-app="tham" ng-controller="tham-control"> 
 
    <div class="container"> 
 
     <table class="table table-bordered table-striped"> 
 
     <thead> 
 
      <tr>`enter code here` 
 
      <th>Sl.No</th> 
 
      <th>Product</th> 
 
      <th>Cost</th> 
 
      <th>Quantity</th> 
 
      <th>Total</th> 
 
      <th>Action</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr class="items"> 
 
      <td> 
 
       <input type="number" ng-model="slno" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" ng-model="product" /> 
 
      </td> 
 
      <td> 
 
       <input type="number" ng-model="cost" /> 
 
      </td> 
 
      <td> 
 
       <input type="number" ng-model="quantity" /> 
 
      </td> 
 
      <td> 
 
       <input type="number" ng-value="cost*quantity" /> 
 
      </td> 
 
      <td> 
 
       <button ng-click="add_row()">Add</button> 
 
      </td> 
 
      </tr> 
 
      <!-- filter can be added using pipe charcter --> 
 
      <tr class="items" ng-repeat="item in items"> 
 
      <td> 
 
       {{item.slno}} 
 
      </td> 
 
      <td> 
 
       {{item.product}} 
 
      </td> 
 
      <td> 
 
       {{item.cost}} 
 
      </td> 
 
      <td> 
 
       {{item.quantity}} 
 
      </td> 
 
      <td> 
 
       {{item.cost*item.quantity }} 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</body>

你可以请参阅此处的完整添加编辑和删除功能。 https://codereview.stackexchange.com/questions/54475/basic-and-simple-view-add-edit-and-delete-functionality

来源

2015-10-13 18:36:39 Burimi

采用了棱角分明的js

回答

相关问题