CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-scopeappendchild
Andrea Lombardi
Andrea Lombardi

Reputation: 21

how to use angularJS with appended elements

Basically, i have a structure like this example

Every cell of last column needs to have this formula:

value[i][2] = value[i-1][2] + value[i][0] - value[i][1]

I'm actually having 2 problems. The first one comes when i just try to program the first row of the table. What's wrong with this extremely simple thing?

angular.module('calc', [])
    .controller('cont', function($scope) {
        $scope.addNumbers = function() {
            var c = aCom[30][5];
            var a = parseFloat($scope.entrata1);
            var b = parseFloat($scope.uscita1);
            return  c+a-b;
        }
});

considering entrata1 and uscita1 as they are value[0][0] and value[0][1].

But most important, how can I extend the formula to all other rows? Consider that every row except the first one is created dinamically with an appendChild()function to the body, do i have to use at every appended item the function setAttribute("ng-model","entrata")? Thanks

Upvotes: 0

Views: 52

Answers (1)

Vitor Rodrigues
Vitor Rodrigues

Reputation: 86

I would suggest forget appendchild. Use ng-repeat and add rows adding to the scope like this

angular.module('plunker', []).controller('tableCtrl', function($scope,$filter) {
    $scope.rows = [{'a': 0,'u': 300},{'a': 0,'u': 150},{'a': 200,'u': 0},{'a': 0,'u': 300}];
    $scope.rowscalc = function(val){
    	var total=0;
    	angular.forEach($scope.rows, function(values, key){
    		if(key<=val) total += values.u-values.a;});
    	return total;
    };
    $scope.addRowM = function(){
    	$scope.rows.push({'a': 0, 'u': 0});
    };
});
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="plunker" ng-controller="tableCtrl">
    <table class="table">
        <thead>
            <tr>
                <td class="dthead">A</td>
                <td class="dthead">U</td>
                <td class="dthead">Total</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rows">
                <td><input type="number" ng-model="row.a"/></td>
                <td><input type="number" ng-model="row.u"/></td>
                <td>{{rowscalc($index)}}</td>
            </tr>
            <tr>
                <td colspan="3">
                    <button ng-click="addRowM()">Add Row</button>
                </td>
            </tr>

        </tbody>
    </table>
</div>

you can check in plunker

Upvotes: 2

Related Questions