Delving into Angular development and tackling a Fibonacci sequence app. I'm seeking a way to only display the current number in the sequence using ng-repeat, as opposed to having all numbers stack up on the HTML page. Wondering if utilizing a directive or implementing "limitTo" would be the solution to dynamically show just one number at a time upon button click. Explored various solutions but none quite hit the mark for my specific issue. Any guidance would be greatly appreciated!
Here's the code snippet I've been working on:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fibonacci</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body ng-app="fib" ng-controller="nextFibCtrl">
<h2 ng-repeat="result in results track by $index" | "limitTo: 1"> {{ result }}
</h2>
<div>
<button type="button" class="reset" ng-click="clear()">RESET</button>
<button type="button" class="next" ng-click="nextNum()">NEXT FIB</button>
</div>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js" >
</script>
<script src="script.js"></script>
</body>
</html>
The script file I've put together:
var app = angular.module('fib', []);
app.controller('nextFibCtrl', function($scope,){
$scope.results = [0, 1];
$scope.nextNum = function(){
$scope.currentInt = $scope.results.length -1;
$scope.nextInt = $scope.results[$scope.currentInt] +
$scope.results[$scope.currentInt -1];
$scope.results.push($scope.nextInt);
}
$scope.clear = function(){
$scope.results = [0, 1];
}
});