AngularJS example 5

by spencerooni

HTML

<body ng-app>
    <div ng-controller="BasicController">
        
        <input type="text" ng-model="newAnimalName"/>
        <button ng-click="addAnother()">Add another</button>
        
        <br/><br/>
        
        <div ng-repeat="animal in animals">{{ animal.name }}
            <input type="text" ng-model="animal.cost" />
        </div> <strong>{{ total }}</strong>

        <br/><br/><br/><br/>
        {{animals | json}}
        
    </div>
</body>

CSS

.green-border {
    border-width: 5px;
    border-color: green;
}

JavaScript

function BasicController($scope) {

    $scope.newAnimalName = '';
    
    $scope.addAnother = function() {
        $scope.animals.push({ name: $scope.newAnimalName, cost: 0 });
    };
    
    $scope.animals = [{
        name: 'tiger',
        cost: 5
    }, {
        name: 'elephant',
        cost: 10
    }];

    $scope.$watch('animals', function (animals) {
        $scope.total = 0;
        angular.forEach(animals, function (animal) {
            if(!isNaN(parseFloat(animal.cost))) {
                $scope.total += parseFloat(animal.cost);
            }
        });
    }, true);

}