Question

通过$ scope在控制器中的ng-repeat中检索filteredItems无效

我正在尝试从ng-repeat中获取过滤的项目，但是在控制台记录$scope.filteredItems的值时却无法定义。我什至尝试了Can't get the filtered items from my filtered list inside a modal中提供的解决方案，但它也不起作用。

ng-repeat在uib-typeahead自定义弹出模板中，用于预输入下拉菜单。我正在尝试在父控制器中获取过滤后的值。

example-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预定义自定义模板

<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 的过滤器，但不确定将其添加到此处是否有所不同。无论如何，请告诉我，我会更新我的问题

Answer 1

您可能需要使用ng-keyup。然后在组件中这样写

function onKeyPress(){
     console.log($scope.$$childHead.matches.length);
}

Answer 2

filteredItems变量仅存在于ngRepeat创建的子范围内。为了能够访问，您需要在父范围内进行初始化。例如：

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

   // ...
}

来自ngRepeat文档[ngRepeat]：

此指令创建新的作用域。

因此，如果您在控制器（父范围）中初始化filteredItems，我认为它将在视图的ngRepeat（内部范围）中可见。

从uib-typeahead自定义弹出窗口中检索filteredItems不起作用

通过$ scope在控制器中的ng-repeat中检索filteredItems无效

弹出式UIB预定义自定义模板

2 个答案: