I am encountering difficulties while starting my new Angular project. Initially, I have a controller named DashCtrl in a module called sandpiper, with plans to divide it into services later on.
The goal is to create a list of div.card elements from the $scope.results array within DashCtrl. Furthermore, clicking the add-button should append additional items to $scope.results and display $scope.test in the header. However, after clicking the button multiple times, an unexpected outcome occurs (view screenshot here)
Although $scope.pushit() successfully functions and ng-repeat displays the correct number of items, the titles are missing. Additionally, $scope.test does not appear as expected. Despite spending several hours troubleshooting and even creating a basic Angular test on JSFiddle, I am unable to resolve this issue.
Below is my JavaScript code (two scripts, minified into /build/sandpiper.min.js later)
var app = angular.module('sandpiper', []);
app.controller('DashCtrl',['$scope',function($scope){
$scope.test = "Header"
$scope.results = [
{
title: "Test Item 1",
file: "12345978-My-Test-Document.pdf",
type: "PDF",
tags: ['pdf','test','foo','bar'],
image: "static/img/pdf.png"
}
]
$scope.pushit = function(){
$scope.results.push({
title: "Test Item 1",
file: "12345978-My-Test-Document.pdf",
type: "PDF",
tags: ['pdf','test','foo','bar'],
image: "static/img/pdf.png"
})
}
}])
And here's my HTML code snippet (unrelated parts excluded)
<!DOCTYPE html>
<html lang="en">
<head>
(...)
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/materialize/bin/materialize.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<!-- endbower -->
<script src="/build/sandpiper.min.js"></script>
</head>
<body ng-app="sandpiper">
<main>
<div class="container" id="content-root">
<div id="dash-wrapper" ng-controller="DashCtrl">
<h3>Test {{ test }}</h3>
<a ng-click="pushit()" class="btn-floating btn-large waves-effect waves-light" id="add-button">
<i class="material-icons">add</i>
</a>
<nav>
(...)
</nav>
<div class="row" id="results-container">
<div class="col s12 m4 l3" ng-repeat="item in results">
<div class="card">
<div class="card-content">
<span class="black-text">{{ item.title }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
(...)
</body>
</html>
I would greatly appreciate any assistance. Thank you in advance for your help. Hopefully, it's not a simple mistake...
(As this is my first post here, please let me know if I'm making any errors)