如何使用asp.net mvc在角度js中获取动态创建的字段值

时间:2015-07-06 05:08:40

标签: asp.net-mvc asp.net-mvc-4

我是angularjs的新手, 如下例所示,我们可以添加多个项目但是如何将所有这些项目都添加到控制器中(Asp.net MVC) 这是Fiddle

加价

<h2>Shopping Card Example</h2>
<div ng:controller="CartForm">
    <table class="table">
        <tr>

            <th>Description</th>
            <th>Qty</th>
            <th>Cost</th>
            <th>Total</th>
            <th></th>
        </tr>
        <tr ng:repeat="item in invoice.items">
            <td><input type="text" ng:model="item.description"class="input-small"></td>           
            <td><input type="number" ng:model="item.qty" ng:required class="input-mini"></td>
            <td><input type="number" ng:model="item.cost" ng:required class="input-mini"></td>
            <td>{{item.qty * item.cost | currency}}</td>
            <td>
                [<a href ng:click="removeItem($index)">X</a>]
            </td>
        </tr>
        <tr>
            <td><a href ng:click="addItem()" class="btn btn-small">add item</a></td>
            <td></td>
            <td>Total:</td>
            <td>{{total() | currency}}</td>
        </tr>
    </table>
</div>

JS

function CartForm($scope) {
    $scope.invoice = {
        items: [{
            qty: 10,
            description: 'item',
            cost: 9.95}]
    };

    $scope.addItem = function() {
        $scope.invoice.items.push({
            qty: 1,
            description: '',
            cost: 0
        });
    },

    $scope.removeItem = function(index) {
        $scope.invoice.items.splice(index, 1);
    },

    $scope.total = function() {
        var total = 0;
        angular.forEach($scope.invoice.items, function(item) {
            total += item.qty * item.cost;
        })

        return total;
    }
}

1 个答案:

答案 0 :(得分:0)

以下是您现在需要的代码,更新的数据将在invoice.items

HTML

function CartForm($scope) {
    $scope.invoice = {
        items: [{
            qty: 10,
            description: 'item',
            cost: 9.95}]
    };
    console.log($scope.invoice.items[$scope.invoice.items.length]);

    $scope.addItem = function() {
        $scope.invoice.items.push({
            qty: $scope.item.qty,
            description: $scope.item.description,
            cost: $scope.item.cost
        });
        $scope.item.qty="";
        $scope.item.description="";
        $scope.item.cost="";
    },

    $scope.removeItem = function(index) {
        $scope.invoice.items.splice(index, 1);
    },

    $scope.total = function() {
        var total = 0;
        angular.forEach($scope.invoice.items, function(item) {
            total += item.qty * item.cost;
        })

        return total;
    }
}

角度控制器

.fillStyle

`