user6440175 user6440175 - 5 months ago 17
AngularJS Question

Angular on one of the ng models not accessible

I am working with angular and I am having this issue for a few days. When I tried to submit the form the value of my second drop down is null(selectedDocument dropdown). I posted my code a few days back but nobody could help me. That is why I am reposing the code again.

<div ng-controller="myController">
<form name="myForm" >
<div>
<select ng-model="selectedCompany">
<option value="">-- Select Company --</option>
<option data-ng-repeat="currentSetting in currentSettings" value={{currentSetting.SCACCode}}>{{currentSetting.SCACCode}}</option>
</select>
</div>
<div><input id="Text1" type="text" ng-model="enteredCustomer"/></div>
<div>
<select ng-model="selectedDocument" ng-click="getTypes()">
<option value="">-- Select Doc type --</option>
<option data-ng-repeat="docSetting in docSettings" value="{{docSetting.Doc_Type}}">{{docSetting.Doc_Type}}</option>
</select>
</div>
<input id ="btnAdd" type="button" value="Add new record" ng-click="setNewRecord()"/>
</form>




And this is my javascript

<script>
var myApp = angular.module("myApp", []);

myApp.service('companiesService', ['$http', '$q', function ($http, $q) {
var currentSettings = null;

this.getList = function () {
var def = $q.defer()
if (currentSettings) {
def.resolve(currentSettings);
} else {
$http.post('GetCompanies')
.then(function (response) {
var response = $.parseJSON(response.data)
currentSettings = response;
def.resolve(currentSettings);
});
}
return def.promise;
}
}]);

myApp.service('allCurrentSettingsService', ['$http', '$q', function ($http, $q) {
var allSettings = null;
this.getList = function () {
var def = $q.defer()
if (allSettings) {
def.resolve(allSettings);
} else {
$http.post('GetAllCurrentSettings')
.then(function (response) {
var response = $.parseJSON(response.data)
allSettings = response;
def.resolve(allSettings);
});
}
return def.promise;
}
}]);

myApp.service("deleteService", function ($http) {
this.removeRow = function (recId, compName, custName, docName) {

$http.post('DeleteRecord', { settingID: recId,companyName: compName,customerName: custName, documentName: docName } )
.success(function (data, status, headers, config) {
window.location.reload();
})
.error(function (data, status, header, config) {
});
}
});

myApp.service("setNewRecordService", function ($http) {
this.setNewRecord = function (compName, custName, docName) {


$http.post('SetCurrentRecord', { companyName: compName, customerName: custName, documentType: docName })
.success(function (data, status, headers, config) {


window.location.reload();
})
.error(function (data, status, header, config) {
});
}
});

myApp.service('getDocTypesService', ['$http', '$q', function ($http, $q) {
var docSettings = null;
this.getDocTypes = function (compName, custName) {
var def = $q.defer()
if (docSettings) {
def.resolve(docSettings);
} else {
$http.post('GetDocTypes', { companyName: compName, customerName: custName })
.then(function (response) {
var response = $.parseJSON(response.data)
docSettings = response;
def.resolve(docSettings);
});
}
return def.promise;
}
}]);





myApp.controller('myController', ['$scope', 'companiesService', 'allCurrentSettingsService','deleteService', 'setNewRecordService', 'getDocTypesService',
function ($scope, companiesService, allCurrentSettingsService, deleteService, setNewRecordService, getDocTypesService) {

$scope.currentSettings = '';
companiesService.getList().then(function (value) {
$scope.currentSettings = value;

}),
$scope.allSettings = '';
allCurrentSettingsService.getList().then(function (value) {
$scope.allSettings = value;

}),
$scope.deleteRecordFromDB = function (recId, compName, custName, docName) {
deleteService.removeRow(recId, compName, custName, docName)
},

$scope.companyName = '';
$scope.setNewRecord = function () {
setNewRecordService.setNewRecord($scope.selectedCompany, $scope.enteredCustomer, $scope.selectedDocument)

},

$scope.getTypes = function () {
getDocTypesService.getDocTypes($scope.selectedCompany, $scope.enteredCustomer).then(function (value) {
$scope.docSettings = value
});
};
}
]);

Answer

Your might have something something to do with the way angular(and Javascript for that matter) handles scopes.

The short of it is that the problem is that a child scope is breaking the connection to the parent scope(your controller variable). A simple fix is to bind your form variables to an object and refer to them with the dot notation in the view.

You can read up on this in numerous SO answers, for example here: AngularJS: dot in ng-model

Edit

I made a minimal working plunkr that should point you in the right direction, and here is the edited code.

myApp.controller('myController', ['$scope', 'companiesService', 'allCurrentSettingsService','deleteService', 'setNewRecordService', 'getDocTypesService',
  function ($scope, companiesService, allCurrentSettingsService, deleteService, setNewRecordService, getDocTypesService) {

      $scope.selections = {company: null, document: null};

      $scope.currentSettings = '';
      companiesService.getList().then(function (value) {
          $scope.currentSettings = value;

      }),
      $scope.allSettings = '';
      allCurrentSettingsService.getList().then(function (value) {
          $scope.allSettings = value;

      }),
      $scope.deleteRecordFromDB = function (recId, compName, custName, docName) {
          deleteService.removeRow(recId, compName, custName, docName)
      },

      $scope.companyName = '';
      $scope.setNewRecord = function () {
          setNewRecordService.setNewRecord($scope.selected.company, $scope.enteredCustomer, $scope.selected.document)

      },

      $scope.getTypes = function () {
          getDocTypesService.getDocTypes($scope.selected.company, $scope.enteredCustomer).then(function (value) {
              $scope.docSettings = value
          });
      };
        }
]);

and html:

<div  ng-controller="myController">
    <form name="myForm" >
    <div>
        <select ng-model="selected.company">
            <option value="">-- Select Company --</option>
            <option data-ng-repeat="currentSetting in currentSettings" value={{currentSetting.SCACCode}}>{{currentSetting.SCACCode}}</option>
        </select>
</div>
<div><input id="Text1" type="text"  ng-model="enteredCustomer"/></div>
<div>
    <select ng-model="selected.document" ng-click="getTypes()">
        <option value="">-- Select Doc type --</option>
        <option data-ng-repeat="docSetting in docSettings" value="{{docSetting.Doc_Type}}">{{docSetting.Doc_Type}}</option>
    </select>
</div>
<input id ="btnAdd" type="button" value="Add new record" ng-click="setNewRecord()"/>