Как реализовать два md-автозаполнения углового js-материала в одной форме и один контроллер на веб-странице? - PullRequest
Новая
       7

Как реализовать два md-автозаполнения углового js-материала в одной форме и один контроллер на веб-странице?

0 голосов
/ 14 мая 2018

Мне нужно два md-автозаполнения на одной странице, поэтому в соответствии с документом углового js-материала я включаю два md-autocomplete в мою форму: один для названия компании-изготовителя транспортного средства и другой для модели транспортного средства, но когда я выбираю название транспортного средства из первого md-autocomplete, затем второй md-autocomplete появляется значение [объект объекта].Так, как я буду изменять его функцию JS? 

<!--Html Code-->
<md-autocomplete  required='' ng-disabled="isDisabled" md-no-cache="noCache" md-selected-item="selectedItem" md-search-text-change="searchTextChange(searchText)" md-search-text="searchTextModel" md-selected-item-change="selectedItemChange(item)" md-items="item in querySearch(searchTextModel)" md-item-text="item.name" md-min-length="0" md-menu-class="autocomplete-custom-template"  md-floating-label="Make">
    <md-item-template>
        <span class="item-title">
        <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
        <span>{{item.name}}</span>
        </span>
    </md-item-template>
    <div ng-messages="userForm.autocomplete.$error">
        <div ng-message="required">This field is required</div>
    </div>
</md-autocomplete>


<md-autocomplete  required='' ng-disabled="isDisabled" md-no-cache="noCache" md-selected-item="selectedItemModel" md-search-text-change="searchTextChange(searchText)" md-search-text="searchText"  md-items="item in querySearchModel(searchText)" md-item-text="item.title" md-min-length="0" md-menu-class="autocomplete-custom-template"  md-floating-label="Model">
    <md-item-template>
        <span class="item-title">
        <span> {{item.name}} </span>
        </span>
    </md-item-template>
    <div ng-messages="userForm.autocomplete.$error">
        <div ng-message="required">This field is required</div>
    </div>
</md-autocomplete>




 //Angular js Controller code

  //Auto complete function for car make

  $scope.make=[{id:1,name:"Audi"},{id:2,name:"BMW"},{id:3,name:"Ferrari"}];
  $scope.selectedItem  = null;
  $scope.searchText    = null;
  $scope.querySearch   = querySearch;


   function querySearch (query) {

          var results = query ? $scope.categories.filter(createFilterFor(query)) : $scope.make,
                        deferred;
                    if (self.simulateQuery) {
                        deferred = $q.defer();
                        $timeout(function () {
                            deferred.resolve(results);
                        }, Math.random() * 1000, false);
                        return deferred.promise;
                    } else {
                        return results;
                    }

   }

   function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);

      return function filterFn(Make) {
        //alert(state);
        //console.log(state);
        return (Make.name.toLowerCase().indexOf(lowercaseQuery) === 0);
      };

    }


   //Auto complete function for car models
   $scope.model=[{mid:1,id:1,name:"Q3"},{mid:2,id:1,name:"Q6"},{mid:3,id:1,name:"Q2"}];
   $scope.selectedItemModel  = null;
   $scope.searchTextModel    = null;
   $scope.querySearchModel=querySearchModel;


   function querySearchModel (query) {

          var results = query ? $scope.model.filter(createFilterFor(query)) : $scope.model,
                        deferred;
                    if (self.simulateQuery) {
                        deferred = $q.defer();
                        $timeout(function () {
                            deferred.resolve(results);
                        }, Math.random() * 1000, false);
                        return deferred.promise;
                    } else {
                        return results;
                    }

   }


   function createFilterForModel(query) {
      var lowercaseQuery = angular.lowercase(query);

      return function filterFn(Model) {
       return (Model.name.toLowerCase().indexOf(lowercaseQuery) === 0);
      };

    }

1 Ответ

0 голосов
/ 12 марта 2019

У меня тоже была похожая проблема, и я нашел ваш вопрос.При первом автозаполнении вы вызываете searchTextChange(searchText), но searchText - со второго автозаполнения, в то время как в первом вы назвали его searchTextModel.

Я нашел это, потому что у меня возникла проблема, по которойнесколько автозаполнение на той же странице, где разделяет значение.Ваш вопрос поможет мне найти решение.В то время как в typeahead Bootstrap вы используете $viewValue для любого typeahead, в mdAutocomplete вы указываете, какую модель связывать searchText, и, таким образом, вы не можете использовать одну и ту же привязку для всех автозаполнений, у вас должна быть одна для каждого.

...