ng模型之一的角度無法訪問

Question

我正在與angular一起工作，幾天來一直遇到這個問題。 當我嘗試提交表單時，第二個下拉列表的值為null（selectedDocument下拉列表）。 我幾天前發布了代碼，但沒有人可以幫助我。 這就是為什么我要重新放置代碼。

<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>

這是我的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 1

下拉列表是否獲取數據

如果不

我認為在getTypes函數中，你可以試試這個嗎

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

Answer 2

例如，在您的控制器中，您可以：

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

什么是逗號？

以結束通話； 以及所有其他人。

您的第一個選擇具有來自該第一個服務呼叫的數據。 然后由於它后面所有的逗號功能而出錯。 正確終止它們，然后當它變為設置$ scope.docSettings時應該正確。

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

像這樣，我的ES5有點生銹，但是看看是否可行。 編輯：刪除不必要的docType。

Answer 3

您可能與angular（以及有關此問題的Javascript）處理范圍的方式有關。

簡而言之，問題在於子作用域斷開了與父作用域（您的控制器變量）的連接。 一個簡單的解決方法是將表單變量綁定到對象，並在視圖中使用點符號引用它們。

您可以在許多SO答案中對此進行閱讀，例如，在這里： 為什么AngularJS文檔在model指令中不使用點？

編輯

我做了一個最小的工作插件 ，應該指出正確的方向，這是編輯后的代碼。

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

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