My script.js file contains an array like this:
$scope.companies = [
{
id: '1',
contact: 'John Doe',
address: '123 Main Street, USA',
function: 'Customer',
telephone: '9876543210',
fax: '0123456789',
url: 'http://www.example.com'
},
];
A form allows users to add a new item to the array. When the form is submitted, a new array item is created and then added ('pushed') to the existing array.
The console.log command prints out the updated array with all the data successfully.
However, when navigating to another page where the data is displayed in a table, the new item is not shown - indicating that it has not been added to the script.js file.
What steps should I take to resolve this issue?
script.js:
// Custom module for the app
var app = angular.module("myApp", ['ngRoute', 'UserApp']);
var appName = 'My App';
// Defining routes
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
// Route configuration here
otherwise({
templateUrl: '404.html'
});
$locationProvider.html5Mode(true);
}]);
// Initialize UserApp
app.run(function(user) {
user.init({ appId: 'REMOVED' });
});
// Dashboard Controller
app.controller("DashboardController", function($scope) {
$scope.title = 'Dashboard';
});
// Companies Controller
app.controller("CompaniesController", ['$scope', function($scope) {
$scope.title = 'Companies';
$scope.title_sub = 'Add Company';
$scope.add = function(newCompany) {
// Add logic here to include the new company to the array
};
$scope.companies = [
{
id: '1',
contact: 'John',
address: 'Some street, United States',
function: 'Client',
telephone: '0123455858446',
fax: '0128289385',
url: 'http://www.example.com'
},
];
}]);
// Global controller
app.controller('GlobalController', ['$scope', function($scope) {
$scope.appName = "My App";
}]);
// Login Controller
app.controller("LoginController", function($scope) {
$scope.title = 'Login';
});
// Edit Account Controller
app.controller('EditAccountController', ['$scope' ,'$routeParams', function($scope, $routeParams) {
$scope.title = 'Edit Account';
// Update user account info
}]);
// Profile Controller
app.controller('ProfileController', ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.title = 'Profile';
// Fetch user profile details
}]);
add-company.html:
<div class="row">
<div class="col-md-12>
<h1>{{ title_sub }}</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Add a new company.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form>
<!-- Form fields for adding a new company -->
</form>
</div>
</div>
Edit: new controller:
app.controller("CompaniesController", ['$scope', 'companyService', function($scope, companyService) {
$scope.title = 'Companies';
$scope.title_sub = 'Add Company';
$scope.add = function(newCompany) {
// Use companyService to add the new company to the list
};
$scope.companies = companyService.getCompanies();
}]);