Привязать значение выбранного выпадающего значения из одного поля автозаполнения к другому с помощью angularJS

0

С помощью официальных документов Angular-Material Docs, найденных здесь, мне удалось добавить три поля автозаполнения рядом друг с другом. Однако я хотел бы привязать значение, выбранное из первого раскрывающегося поля, для автоматического выбора в третьем поле выпадающего меню.

Какой был бы лучший подход к привязке первого значения автозаполнения к третьему, но НЕ наоборот?

Автозаполнение всех трех полей выглядит так, но каждый из них завернут в свои отдельные контроллеры:

<form ng-submit="$event.preventDefault()">
    <md-autocomplete
        ng-disabled="ctrl.isDisabled"
        md-no-cache="ctrl.noCache"
        md-selected-item="ctrl.selectedItem"
        md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
        md-search-text="ctrl.searchText"
        md-selected-item-change="ctrl.selectedItemChange(item)"
        md-items="item in ctrl.querySearch(ctrl.searchText)"
        md-item-text="item.display"
        md-min-length="1"
        md-floating-label="Final">
        <md-item-template>
            <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
        </md-item-template>
        <md-not-found>
            No items matching "{{ctrl.searchText}}" were found.
        </md-not-found>
    </md-autocomplete>
</form>

И JS, который я скопировал из примера Docs:

app.controller('abcCtrl', abcCtrls);
    function abcCtrls ($timeout, $q, $log) {
        var self = this;
        self.simulateQuery = false;
        self.isDisabled    = false;
        // list of 'state' value/display objects
        self.states        = loadAll();
        self.querySearch   = querySearch;
        self.selectedItemChange = selectedItemChange;
        self.searchTextChange   = searchTextChange;
        self.newState = newState;
        function newState(state) {
          alert("Sorry! You'll need to create a Constituion for " + state + " first!");
        }
        // ******************************
        // Internal methods
        // ******************************
        /**
         * Search for states... use $timeout to simulate
         * remote dataservice call.
         */
        function querySearch (query) {
          var results = query ? self.states.filter( createFilterFor(query) ) : self.states,
              deferred;
          if (self.simulateQuery) {
            deferred = $q.defer();
            $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
            return deferred.promise;
          } else {
            return results;
          }
        }
        function searchTextChange(text) {
          $log.info('Text changed to ' + text);
        }
        function selectedItemChange(item) {
          $log.info('Item changed to ' + JSON.stringify(item));
        }
        /**
         * Build 'states' list of key/value pairs
         */
        function loadAll() {
          var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
                  Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
                  Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
                  Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
                  North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
                  South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
                  Wisconsin, Wyoming';
          return allStates.split(/, +/g).map( function (state) {
            return {
              value: state.toLowerCase(),
              display: state
            };
          });
        }
        /**
         * Create filter function for a query string
         */
        function createFilterFor(query) {
          var lowercaseQuery = angular.lowercase(query);
          return function filterFn(state) {
            return (state.value.indexOf(lowercaseQuery) === 0);
        };
    }
}; 
Теги:
angular-material
autocomplete
material-design

1 ответ

1

md-selected-item-change - это выражение, которое будет выполняться каждый раз, когда будет выбран новый элемент

Таким образом, в вашей функции selectedItemChange задайте модель, представляющую третье поле autocomplete.

HTML

<div ng-app="myApp" ng-controller="abcCtrl as ctrl">
    <form ng-submit="$event.preventDefault()">
        <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="1" md-floating-label="Final">
            <md-item-template><span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>

            </md-item-template>
            <md-not-found>No items matching "{{ctrl.searchText}}" were found.</md-not-found>
        </md-autocomplete>
        <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem2" md-search-text-change="ctrl.searchTextChange(ctrl.searchText2)" md-search-text="ctrl.searchText2" md-items="item in ctrl.querySearch(ctrl.searchText2)" md-item-text="item.display" md-min-length="1" md-floating-label="Final">
            <md-item-template><span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>

            </md-item-template>
            <md-not-found>No items matching "{{ctrl.searchText}}" were found.</md-not-found>
        </md-autocomplete>
        <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem3" md-search-text-change="ctrl.searchTextChange(ctrl.searchText3)" md-search-text="ctrl.searchText3" md-items="item in ctrl.querySearch(ctrl.searchText3)" md-item-text="item.display" md-min-length="1" md-floating-label="Final">
            <md-item-template><span md-highlight-text="ctrl.searchText3" md-highlight-flags="^i">{{item.display}}</span>

            </md-item-template>
            <md-not-found>No items matching "{{ctrl.searchText3}}" were found.</md-not-found>
        </md-autocomplete>
    </form>
</div>

JavaScript:

var app = angular.module('myApp', ['ngMaterial']);
app.controller('abcCtrl', abcCtrls);

function abcCtrls($timeout, $q, $log) {
    var self = this;
    self.simulateQuery = false;
    self.isDisabled = false;
    // list of 'state' value/display objects
    self.states = loadAll();
    self.querySearch = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange = searchTextChange;
    self.newState = newState;

    function newState(state) {
        alert("Sorry! You'll need to create a Constituion for " + state + " first!");
    }

    // ******************************
    // Internal methods
    // ******************************
    /**
     * Search for states... use $timeout to simulate
     * remote dataservice call.
     */
    function querySearch(query) {
        var results = query ? self.states.filter(createFilterFor(query)) : self.states,
                deferred;
        if (self.simulateQuery) {
            deferred = $q.defer();
            $timeout(function () {
                deferred.resolve(results);
            }, Math.random() * 1000, false);
            return deferred.promise;
        } else {
            return results;
        }
    }

    function searchTextChange(text) {
        $log.info('Text changed to ' + text);
    }

    function selectedItemChange(item) {
        self.selectedItem3 = item;
        $log.info('Item changed to ' + JSON.stringify(item));
    }

    /**
     * Build 'states' list of key/value pairs
     */
    function loadAll() {
        var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
              Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
              Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
              Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
              North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
              South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
              Wisconsin, Wyoming';
        return allStates.split(/, +/g).map(function (state) {
            return {
                value: state.toLowerCase(),
                display: state
            };
        });
    }

    /**
     * Create filter function for a query string
     */
    function createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(state) {
            return (state.value.indexOf(lowercaseQuery) === 0);
        };
    }
}
  • 0
    «Итак, в вашей функции selected-Item-Change задайте модель, которая представляет третье поле autocomplete ». Поэтому я должен добавить вышеуказанную функцию ниже или выше текущего js, который я скопировал Rayon?
  • 0
    Кстати, я только начинаю изучать angularJs, поэтому, пожалуйста, не обращайте внимания на вопросы о нубах.
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню