Получение отфильтрованных элементов из пользовательского всплывающего окна uib-typeahead не работает - PullRequest
Новая
       15

Получение отфильтрованных элементов из пользовательского всплывающего окна uib-typeahead не работает

2 голосов
/ 22 марта 2019

Получение отфильтрованных элементов из ng-repeat в контроллере через $ scope не работает

Я пытаюсь получить отфильтрованные элементы из ng-repeat, но при записи в консоль значения $scope.filteredItems я получаю неопределенное значение. Я даже попробовал решение, предоставленное в Не могу получить отфильтрованные элементы из моего отфильтрованного списка внутри модального , но оно тоже не сработало.

ng-repeat находится в uib-typeahead пользовательских всплывающих шаблонах для раскрывающегося списка typeahead. Я пытаюсь получить отфильтрованное значение в родительском контроллере.

пример-input.component.ts 

/////////////////////////////////
componentController.$inject = ['$scope', 'exampleDataService'];
function componentController($scope, exampleDataService) {

    var someInput = this;
    someInput.typedText = '';
    someInput.onKeyPress = onKeyPress;
    return;

    /////////////////////////////////
    //controller implementation detail
    /////////////////////////////////

    function onKeyPress(){
        console.log($scope.filteredItems); // prints undefined
    }
}

Пользовательский шаблон UIB-Typeahead для всплывающего окна 

<script type="text/ng-template" id="input-custom-template.html">
    <ul class='dropdown-menu' ng-show='isOpen() && !moveInProgress'
        ng-style="{top: position().top+'px', left: position().left+'px'}"
        role='listbox' aria-hidden='{{!isOpen()}}' match-limit  in-view-container> 
        <li style="max-height:0;overflow:hidden"><span in-view="$inview && matchLimit.reset()"> </span></li>
        <li ng-repeat='match in (filteredItems = (matches | someMatchSort:query | limitTo:matchLimit.value)) track by some.model.example '
            ng-class='{active: isActive($index) }'
            ng-mouseenter='selectActive($index)'
            ng-click='selectMatch($index, $event)'
            role='option' id='{{::match.id}}'
            in-view="!$inview && isActive($index) && scrollTarget.scrollIntoView()" 
            scroll-target
            >
            <div uib-typeahead-match index='$index' match='match'
                 query='query' template-url='templateUrl'>
            </div>
        </li>

    </ul>
</script>

<input type="text" ng-model="someInput.typedText" typeahead-min-length="1"
       uib-typeahead="option.example as option.value for option in someInput.options | filter:{value:$viewValue}"
       class="form-control input-text-example icon-search"
       placeholder="example"
       typeahead-popup-template-url="input-custom-template.html"
       ng-keypress="someInput.onKeyPress()"/>

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать. Существует также фильтр с именем someMatchSort.filter.ts , но я не уверен, имеет ли смысл добавлять его сюда. В любом случае, дайте мне знать, я обновлю свой вопрос

Ответы [ 2 ]

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

Вы можете использовать ng-keyup в вашем случае. Тогда в вашем компоненте напишите так 

function onKeyPress(){
     console.log($scope.$$childHead.matches.length);
}
0 голосов
/ 22 марта 2019

Переменная FilterItems существует только в дочерней области, созданной ngRepeat.Для того, чтобы получить доступ, вам нужно инициализировать в родительской области.Например: 

function componentController($scope, exampleDataService) {
   $scope.filteredItems = {};

   // ...
}

Из документации ngRepeat [ ngRepeat ]:

Эта директива создает новую область действия.

Итакесли вы инициализируете фильтрованные элементы в вашем контроллере (родительская область), я предполагаю, что это будет видно в ngRepeat представления (внутренняя область).

...