在AngularJS中,我们可以使用ngModel指令来实现动态名称输入。以下是一个示例代码:
HTML代码:
-
{{ item }}
JavaScript代码:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [];
$scope.addName = function() {
$scope.names.push($scope.name);
$scope.name = ''; // 清空输入框
};
});
在上面的示例中,我们首先创建了一个AngularJS应用程序myApp,并将其绑定到一个DOM元素上。然后,在控制器myCtrl中,我们定义了一个names数组来存储输入的名称。addName函数用于将输入的名称添加到数组中,并清空输入框。
在HTML中,我们使用ng-model指令来绑定输入框的值到$scope.name变量。ng-click指令用于在点击按钮时调用addName函数。ng-repeat指令用于遍历names数组,并将每个元素显示为列表项。
这样,当用户在输入框中输入名称并点击“添加”按钮时,名称将被添加到列表中,并且输入框将被清空。