javascript - AngularJS "ng-repeat | filter:..."没有按我的预期工作(不显示任何数据)

Question

我正在尝试学习一些 AngularJS。我有一个本地托管的小页面，用于在 MySQL 中查找信息。这些字段是 [user_ID、comment、user_Name]。

以下是网页代码: AngularJS 测试

<div id="container" ng-app='two_way' ng-controller='two_way_control'>
    <input ng-model="name_filter" placeholder="filter names">
    <p>{{name_filter}}</p>
  <div class="row" ng-repeat="data in profile_pictures | filter:{data.user_Name:name_filter}">
    <div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:125px;width:500px;margin-left:240px;margin-top:20px;">
      <h4 style="padding:10px;">{{data.user_Name}} says:</h4><hr>
      <p style="padding:10px;">
        {{data.comment}}
      </p>
      <img src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
    </div>
  </div>
</div>

现在我遇到的问题是关于“profile_pictures 中的数据”的过滤器

我正在尝试仅按 user_Name 字段进行过滤。当我在网站的输入框中输入任何内容时，不会显示任何数据(一切都会消失)。我尝试将过滤器硬编码为我知道数据中的名称，但在加载页面时只显示任何数据。

有什么想法吗？

感谢您的帮助

Answer 1

您的过滤器中的语法无效。您需要提供对象的键名称作为过滤器对象，不要对对象键使用点表示法 @filter:{data.user_Name:name_filter}"

即尝试

ng-repeat="data in profile_pictures | filter:{user_Name:name_filter}"