2016-03-22 32 views
0

我在下面的任務中遇到問題。在模態彈出時在AngularJS中填充選擇下拉值的問題

我有一個員工名單,我有編輯按鈕,現在當我點擊編輯按鈕時,一個模式彈出窗口打開,它有輸入文本和選擇下拉菜單。 下面是我的代碼: -

HTML部分: -

<div class="form-group col-md-12 filled"> 
       <label class="control-label">Supported Insurance</label> 
       <ui-select ng-change="onSelectProvider(company.selectedInsurance)" ng-model="company.selectedInsurance" theme="select2" 
          title="Choose a company" search-enabled="true" > 
        <ui-select-match placeholder="search and choose supported insurance"> 
         {{$select.selected.name}}{{}} 
        </ui-select-match> 
        <ui-select-choices 
          repeat="provider in tradingPartnerValues | filter: $select.search "> 
         <div class="inner-select" ng-bind-html="provider.name | highlight: $select.search" ></div> 
         <span><button type="button" class="btn btn-xs btn-round btn-info disabled"><span class="md md-add"></span></button></span> 
        </ui-select-choices> 
       </ui-select> 
      </div> 
      <div class="col-md-12 providerList" ng-model="btnProviderValue" ng-repeat = "iValues in selectedProviderVal track by $index"> 
       <button class="btn btn-info">{{iValues.name}}<i class="fa fa-remove" ng-click="removeProvider($index)"></i></button> 
      </div> 

我的控制器: -

'use strict'; 



angular.module('transman') 
.controller('CompanyDataController', ['$scope', '$rootScope','ngTableParams', '$filter','CompanyService','$modal',function($scope,$rootScope, ngTableParams, $filter,CompanyService,$modal){ 

    $scope.companies =[]; 
    $scope.tradingPartnerValues = []; 
    $scope.selectedProviderVal =[]; 
    $scope.selectedProviderValIDs =[]; 
    //$scope.userId = ''; 
    $scope.button="Update Company"; 
    //$scope.switch=false; 
    $scope.businessTypeValues = []; 
    $scope.companyDataValues = { 
     "name": "", 
     "address": "", 
     "address2": "", 
     "url": "", 
     "geoLat": "95.33534345", 
     "geoLon": "95.43565653", 
     "telephone": 0, 
     "npi": "", 
     "active": "", 
     "tax_id": "", 
     "businessTypeId": "", 
     "partners":"" 
    }; 

    CompanyService.getAllCompanies().success(function (companies) { 
     console.log(companies); 
     angular.forEach(companies, function(item,i){ 
      console.log(JSON.stringify(companies)); 
      console.log(item.businessTypeId[0]); 
      $scope.companies.push({"id":item._id,"icon":'',"companyName" :item.name,"address":item.address,"address2":item.address2,"url":item.url,"geoLat":item.geoLat,"geoLon":item.geoLon,"telephone":item.telephone,"active":item.active,"npi":item.npi,"tax_id":item.tax_id,"businessTypeId":item.businessTypeId[0],"zip":'',"state":'',"city":'',"partners":item.partners}); 
     }); 
     console.log(JSON.stringify($scope.data)); 
    }); 

    CompanyService.get() 
     .success(function (data) { 
      angular.forEach(data, function (item, i) { 
       $scope.businessTypeValues.push({"name": item.name, "id": item._id}); 
      }); 
     }); 

    CompanyService.getTradingPartners() 
     .success(function(data){ 
      angular.forEach(data, function (item, i) { 
       $scope.tradingPartnerValues.push({"name": item.name, "id": item._id}); 
      }); 
     }); 

    $scope.onSelectProvider = function(data){ 
     $scope.selectedProviderVal.push(data); 
     $scope.selectedProviderValIDs.push({"id":data.id}); 
    }; 

    $scope.removeProvider = function($index){ 
     $scope.selectedProviderVal.splice($index,1); 
     $scope.selectedProviderValIDs.splice($index,1); 
    }; 

    $scope.openModel = function(index){ 
     $scope.editCompany = $scope.companies[index]; 
     $scope.userId = $scope.companies[index].id; 
     $scope.companyName = $scope.companies[index].companyName; 
     $scope.address1 = $scope.companies[index].address; 
     $scope.address2 = $scope.companies[index].address2; 
     $scope.city = $scope.companies[index].city; 
     $scope.state = $scope.companies[index].state; 
     $scope.zip = $scope.companies[index].zip; 
     $scope.taxID = $scope.companies[index].tax_id; 
     $scope.website = $scope.companies[index].url; 
     $scope.contactno = $scope.companies[index].telephone; 
     $scope.npi = $scope.companies[index].npi; 
     $scope.selectedValForBussType = $scope.companies[index].businessTypeId; 
     $scope.switch = $scope.companies[index].active; 
     var modalInstance = $modal({ 
      templateUrl: 'app/company/companyModal.html', 
      controller: 'CompanyDataController', 
      scope: $scope, 
      resolve: { 
       items: function() { 
        return $scope.editCompany; 
       } 
      } 
     }); 
     angular.forEach($scope.tradingPartnerValues, function (tradingPartnerValue, i) { 
      angular.forEach($scope.companies[index].partners, function (item, i) { 
       if(item.id==tradingPartnerValue.id) { 
        $scope.selectedProviderVal.push({"name": tradingPartnerValue.name, "id": tradingPartnerValue.id}); 
        $scope.selectedProviderValIDs.push({"id":tradingPartnerValue.id}); 
       } 
      }); 
     }); 
    }; 

    $scope.addCompany = function(){ 

     $scope.companyDataValues = { 
      "name": $scope.companyName, 
      "address": $scope.address1, 
      "address2": $scope.address2, 
      "url": $scope.website, 
      "geoLat": "95.33534345", 
      "geoLon": "95.43565653", 
      "telephone": $scope.contactno, 
      "npi": $scope.npi, 
      "active": $scope.switch, 
      "tax_id": $scope.taxID, 
      "businessTypeId": $scope.selectedValForBussType, 
      "partners":$scope.selectedProviderValIDs 
     }; 
     CompanyService.updateCompanyData($scope.userId, $scope.companyDataValues) 
      .success(function() { 
       console.log("Company data got successfully updated"); 
       //NotificationService.save_success("Company data got update successfully"); 
       resetForm(); 
      }); 
    }; 

    function resetForm() { 
     $scope.companyName = ''; 
     $scope.address1 = ''; 
     $scope.address2 = ''; 
     $scope.city = ''; 
     $scope.state = ''; 
     $scope.zip = ''; 
     $scope.taxID = ''; 
     $scope.website = ''; 
     $scope.npi = ''; 
     $scope.switch = false; 
     $scope.selectedAdmin = ''; 
     $scope.selectedValForBussType = ''; 
     $scope.selectedProviderValIDs =[]; 
     $scope.btnProviderValue =''; 
     $scope.selectedProviderVal=[]; 
     $('#addCompanyForm').trigger("reset"); 
    }; 


    $scope.admins = [{name:"admin",email:"[email protected]"},{name:"user",email:"[email protected]"}]; 

    $scope.tableParams = new ngTableParams({ 
     page: 1,   // show first page 
     count: 10, 
     sorting: { 
      companyfirstname: 'asc'  // initial sorting 
     } 
    }, { 
     filterDelay: 50, 
     total: $scope.companies.length, // length of data 
     getData: function($defer, params) { 
      var searchStr = params.filter().search; 
      console.log(searchStr+"...searchStr"); 
      var mydata = []; 

      if(searchStr){ 
       searchStr = searchStr.toLowerCase(); 
       mydata = $scope.companies.filter(function(item){ 
        return item.companyfirstname.toLowerCase().indexOf(searchStr) > -1 || item.lastname.toLowerCase().indexOf(searchStr) > -1; 
       }); 

      } else { 
       mydata = $scope.companies; 
      } 

      mydata = params.sorting() ? $filter('orderBy')(mydata, params.orderBy()) : mydata; 
      $defer.resolve(mydata.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
     } 
    }); 


}]); 

問題: -

現在,當我打開模式,我選擇下拉列表值沒有被填充。它被重新初始化爲空。 任何人都可以請幫忙嗎?

回答

0

從$模型()

var modalInstance = $modal({ 
      templateUrl: 'app/company/companyModal.html', 
      scope: $scope, 
      resolve: { 
       items: function() { 
        return $scope.editCompany; 
       } 
      } 
     }); 
+0

如果我這樣做,因爲更新的敲擊更新按鈕,我沒有得到的值,我的意思是值保持相同,如果我改變任何,刪除控制器屬性因爲模態沒有定義任何控制器,所以更改一個不會被反映。 –

+0

只是嘗試在openModel()方法中傳遞整個angularjs作用域對象而不是傳遞索引。 –

相關問題