採用了棱角分明的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

回答

相關問題