网络技术问题 | AngularJS 测验 | 第 2 组 | 问题 7

欢迎参加本次 AngularJS 测验，以下是第 2 组的第 7 个问题。

问题描述

当在 AngularJS 中使用 ng-repeat 指令来迭代一个对象数组时，需要注意以下问题：

1. 迭代的元素一般通过 <li>、<div> 等 HTML 标签进行包裹，用于展示列表项。
2. 使用 ng-repeat 指定迭代的数组对象和迭代变量。
3. 可以使用 filter 过滤器来对数组进行筛选。
4. 可以使用 orderBy 过滤器来对数组进行排序。

下面是一个示例代码片段：

<div ng-controller="MyController">
  <ul>
    <li ng-repeat="item in items | filter:search">
      {{ item.name }}
    </li>
  </ul>
</div>

在上述代码片段中，MyController 是控制器的名称，items 是包含对象数组的变量，search 是过滤器条件。通过这段代码，可以将 items 中满足 search 条件的对象显示在列表中。

问题要求

请你使用 AngularJS 实现一个简单的列表应用，满足以下要求：

1. 创建一个包含对象数组的数据模型，每个对象包含 name 和 age 属性。
2. 在 HTML 中使用 ng-repeat 指令迭代数据模型，并显示 name 字段。
3. 添加一个搜索文本框，通过 ng-model 指令绑定到搜索条件。
4. 使用 filter 过滤器根据搜索条件对数据模型进行过滤。

以下是示例代码片段，用作参考：

<div ng-controller="MyController">
  <input type="text" ng-model="searchText" placeholder="Search...">
  <ul>
    <li ng-repeat="item in items | filter:searchText">
      {{ item.name }}
    </li>
  </ul>
</div>

在上述示例中，searchText 是搜索文本框的输入值，items 是数据模型的变量。

提示

• 确保在控制器中定义正确的数据模型和搜索条件变量。
• 在控制器中初始化数据模型，并添加一些示例对象。
• 在页面上使用指令和过滤器绑定数据模型和搜索条件。

祝你好运！