资质 | AngularJS 测验 |第 2 组 |问题 6

AngularJS 是一款流行的前端框架，被广泛使用于 Web 开发中。该问题考察了对于 AngularJS 的理解，以及对于指令的使用能力。

问题描述

给定如下 HTML 页面结构：

<div ng-controller="myController">
  <input type="text" ng-model="name">
  <button ng-click="updateName()">更新名字</button>
  <ul>
    <li ng-repeat="person in people">{{person.name}} - {{person.age}}</li>
  </ul>
</div>

其中，myController 控制器的作用是在 $scope 中定义了一个 people 数组，其结构如下：

$scope.people = [
  {name: "张三", age: 23},
  {name: "李四", age: 30},
  {name: "王五", age: 28},
  {name: "赵六", age: 25},
  {name: "钱七", age: 35},
];

请在控制器中，定义一个名为 updateName 的函数，该函数的作用是将 name 值添加到 people 数组中，同时 age 填充为 18。

解题思路

首先，在控制器中添加 updateName 函数的定义代码：

$scope.updateName = function() {
  $scope.people.push({name: $scope.name, age: 18});
  $scope.name = "";
};

该函数调用时，将 $scope.name 的值作为 name 存储到 people 数组中，同时 age 填充为 18。之后将 $scope.name 置空，以便下次输入。

在 HTML 代码中，使用 ng-click 指令绑定该函数：

<button ng-click="updateName()">更新名字</button>

同时也需要注意，输入框的 ng-model 必须与 $scope.name 对应：

<input type="text" ng-model="name">

最终的效果是，当用户在输入框中输入名字并点击按钮时，控制器中的 updateName 函数被调用，将一条数据添加到了 people 数组中，并将输入框置空。

参考答案

请参考下方的代码片段：

```javascript
$scope.updateName = function() {
  $scope.people.push({name: $scope.name, age: 18});
  $scope.name = "";
};

<div ng-controller="myController">
  <input type="text" ng-model="name">
  <button ng-click="updateName()">更新名字</button>
  <ul>
    <li ng-repeat="person in people">{{person.name}} - {{person.age}}</li>
  </ul>
</div>