Angular on one of the ng models not accessible

Question

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
              });
          };
            }
    ]);

score 0 · Answer 1 · edited Jun 20 '16 at 11:44

0

Is the dropdown get data or not

if not

i think in getTypes function ,can you try this

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

edited Jun 20 '16 at 11:44

Tom Shen

1,045
3
11
29

answered Jun 20 '16 at 10:33

abdoutelb

1,015
1
15
33

Thank you.The drop down is populated with data but when I click on the button, on the server side the value is null. – Jun 20 '16 at 10:42
i assume when you make ng-click first the make digests cycle then you miss the binding ..... try to put selectedDocument as parameter to the submit function – abdoutelb Jun 20 '16 at 10:50
Thank you . Originally I passed selectedDocument as a parameter, When I saw that the value is null I modified my code like that and the value is null again. – Jun 20 '16 at 10:54
@user6440175 could you try to make getDocTypesService.getDocTypes without wrapping in function, remove ng-click on select and tell me is selectedDocument is still null ? – abdoutelb Jun 20 '16 at 12:18

rrd · Answer 2 · 2016-06-20T12:12:26.180

In your controller you have, for example, this:

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

What's the comma for?

End your call with a ; and with all the others too.

Your first select has the data from that first service call. Then it errors out because of all the comma'd functionality after it. Terminate them correctly, and then when it gets down to settings $scope.docSettings it should be correct.

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)
    };

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

Something like that, my ES5 is a little rusty, but see if that works. Edited: removed the unnecessry docTypes.

Thank you . I am new to Angular. Could you please shall me with code how to terminate them correctly. — , Jun 20 '16 at 11:40
Thank you. I did the suggested changes. But the value of docType when I send it to the server is still null. And this is happening when I click the button in setNewRecord(). — , Jun 20 '16 at 12:05

score 0 · Accepted Answer · edited May 23 '17 at 12:08

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: Why don't the AngularJS docs use a dot in the model directive?

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()"/>

I made a small plunkr and added edited code. Hope this fixes your problem. — Walrus, Jun 21 '16 at 06:34

Angular on one of the ng models not accessible

3 Answers3

Edit