Проблема в заполнении выпадающих значений в AngularJS в модальном всплывающем окне

Question

Проблема в заполнении выпадающих значений в AngularJS в модальном всплывающем окне

0

Я столкнулся с проблемами в задаче ниже.

У меня есть один список сотрудников, в котором у меня есть кнопка редактирования, теперь, когда я нажимаю на редактирование, модальное всплывающее окно открывается, и у него есть текст ввода и выберите раскрывающийся список. Ниже мой код: -

Часть 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()));
        }
    });


}]);

ВОПРОС: -

Теперь, когда я открываю модальный, мои выпадающие значения выбора не заполняются. Он получает повторную инициализацию до нуля. Кто-нибудь может помочь?

taruna-systematix 22 март 2016, в 13:10

Источник

Теги:

angularjs

meanjs

1 ответ

Ещё вопросы

Vinit Solanki · Answer 1 · 2016-03-22T09-11-00.000Z

удалить свойства контроллера из $ model()

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

Если я сделаю это, я не получу обновленные значения при нажатии кнопки «Обновить», я имею в виду, что значения остаются прежними, и если я изменяю их, измененное значение не отражается, поскольку для модального режима не определен ни один контроллер.
просто попробуйте передать весь объект видимости angularjs в метод openModel () вместо передачи индекса.