javascript - 无法访问从 ng-repeat 调用的函数中的用户输入

Question

我是 Angular 新手，可能会遗漏一些明显的东西。我确实阅读了 ng-model 范围文档。并遵循建议使用对象而不是基元。

我还尝试了其他人建议的 $parent 。这也没有帮助。

我在这里阅读了很多涉及 ng-repeat 的问答。但他们谈论的是 ng-repeat 内的输入。就我而言，只有一个文本框。我正在尝试使用 ng-repeat 在树内搜索。

<script type="text/ng-template" id="tree_item_renderer.html">
  {{data.name}}
  <ul>
    <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"  ng-show="visible(data)"></li>
  </ul>
</script>

这是被调用的函数:

 $scope.visible = function(item) {
  console.log("SearchText inside visible: " + $scope.input.searchText);
  return !($scope.input.searchText && $scope.input.searchText.length > 0
              && item.title.indexOf($scope.input.searchText) == -1);
    };

看看at my jsFiddle

Answer 1

我在 jsFiddle 上看到了你的代码。有一个您称为 ng-controller="TreeController" 的问题两次并初始化ng-app = Application 。我已经把这两行代码注释掉了，你可以在控制台看到变化。

你遇到这个问题的原因是你让 Angular 重新初始化 TreeController它清除 input.searchText 的值。

查看工作jsFiddle !

<div ng-app="myApp">
  <div ng-controller="TreeController">
    Search UIC:
    <input type="text" ng-change="search()" ng-model="input.searchText" 
            placeholder="Enter your search terms" />
    <!-- <ul ng-app="Application" ng-controller="TreeController"> -->
    <ul>
      <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"  ng-show="visible(data)">
      </li>
    </ul>
  </div>
</div>