如何在div下面插入记录?

时间:2016-12-02 20:47:18

标签: angularjs

通过使用angularjs im乘以两个值,但是当我点击添加按钮时,它应该显示在文本框下面,如

price 10 qty 2 total  20  --->Add>

Price    qty   Total
10        2     20

html代码

<div class="row">
    <div ng-controller="Supercntrl">
        <div class="form-inline" id="Mom">
            Price  <input type="text" ng-model="price" class="form-control" />
            quentity <input type="text" ng-model="Quantity" class="form-control" ng-change="Claci()" />
            Total <input type="text" ng-model="Total" class="form-control" />

            <input type="button" class="btn btn-sm btn-success" value="Add" ng-click="AddDetails()" />

        </div>
        <div >
//Display Insered Record
            </div>
    </div>
</div>

Controller.Js

$scope.Claci = function () {
            if ($scope.price != null && $scope.Quantity != null) {
                $scope.Total = $scope.price * $scope.Quantity
            }
        }

请建议我如何显示其下面的值

1 个答案:

答案 0 :(得分:1)

HTML:

<div>
    <!-- //Display Insered Record -->
    <ul ng-repeat="total in totals">
        <li>Price: {{total.price}}</li>
        <li>Quantity: {{total.quantity}}</li>
        <li>Total: {{total.total}}</li>
    </ul>
</div>

添加到控制器:

$scope.totals = []
$scope.AddDetails = function() {
    $scope.totals.push({
        price: $scope.price,
        quantity: $scope.Quantity,
        total: $scope.Total
    })
    console.log($scope.totals)
}

JSFiddle演示https://jsfiddle.net/eqL7mj9r/