JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
<div ng-app="myapp" ng-controller="mycontroller as ctrl">
<button id="F1" type="button" class="btn btn-primary"
ng-click="ctrl.add()">
<span>新增一項</span>
</button>
<td>Total: {{ ctrl.ok() }}</td>
<input type="number" ng-model= "ctrl.total"
class="form-control" required>
<div ng-repeat="list in ctrl.itemlist">
<select class="form-control" ng-model="Select3"
ng-options="Product.ProductName for Product in list.Products">
<option value="">-- 請選擇 --</option>
</select>
<input type="number" ng-model="list.Price"
class="form-control" placeholder="0" required>
</div>
</div>
JavaScript
angular.module("myapp",[]).
controller("mycontroller",[function() {
var self = this;
self.itemlist = [];
self.add = function() {
self.itemlist.push({
Products: self.Products,
Price: 0
});
}
self.total=self.ok
self.ok = function () {
var total = 0;
for(var i = 0; i < self.itemlist.length; i++){
var product = self.itemlist[i];
total += (product.Price);
}
self.total=total
}
self.Products = [
{
ProductName : 'LFD,PM32F,32,TAIWAN,FN60/H32FP0-Y0Y',
Price : 20
},
{
ProductName : 'LFD,PM49H,49,TAIWAN,FJ70/H49HE0-Y1J',
Price : 30
},
{
ProductName : 'LED MON,C24F390FHE,24,TAIWAN,LW60/S24FE',
Price : 40
},
{
ProductName : 'LED MON,C34H890WJE,34,TAIWAN,LQ70/S34HA2',
Price : 50
},
{
ProductName : 'LFD,UD46E-B,46,TAIWAN,FH50/H46EU0-Y05',
Price : 60
} ]
}]);