Despite following the form structure in AngularJS, I am encountering an issue with pulling values from it. Here is a snippet of my form code:
<form ng-submit="newCompany()">
<div class="form-group">
<label>Name</label><input type="text" name="company_name" id="company_name" tabindex="2" ng-model="newCompany.company_name" class="form-control">
<label>Primary Contact</label><input type="text" name="primary_contact" id="primary_contact" tabindex="2" ng-model="newCompany.primary_contact" class="form-control">
<label>Address</label><input type="text" name="address" id="address" tabindex="2" ng-model="newCompany.address" class="form-control">
<label>Function</label><input type="text" name="function" id="function" tabindex="2" ng-model="newCompany.function" class="form-control">
<label>Telephone</label><input type="text" name="telephone" id="telephone" tabindex="2" ng-model="newCompany.phone" class="form-control">
<label>Fax</label><input type="text" name="fax" id="fax" tabindex="2" ng-model="newCompany.fax" class="form-control">
<label>URL</label></label><input type="text" name="url" id="url" tabindex="2" ng-model="newCompany.url" class="form-control">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="add-submit" id="add-submit" tabindex="10" class="form-control btn btn-primary" value="Add Company">
<br>
<div class="text-center">
<p ng-show="addCompany"><span class="label label-info">{{ addCompany }}</span></p>
</div>
</div>
</div>
</div>
</form>
The issue arises when trying to access newCompany.name or $scope.newCompany.name in the controller. It seems that both methods return nothing and indicate that newCompany is undefined.
Controller:
app.controller("CompaniesController", ['$scope', 'Companies', function($scope, Companies) {
$scope.title = 'Companies';
$scope.title_sub = 'Add Company';
$scope.companyData = {
company_name: newCompany.company_name,
primary_contact: newCompany.primary_contact,
address: newCompany.address,
function: newCompany.function,
telephone: newCompany.phone,
fax: newCompany.fax,
url: newCompany.url
};
$scope.addCompany = function() {
var company = new Companies($scope.companyData);
company.$save();
};
$scope.companies = Companies.query();
}]);
If anyone can provide insight on what might be causing this issue or suggest a fix, it would be greatly appreciated.