Question

我想在表单中输入动态输入，以便用户可以添加他想要的许多输入

同时我想显示它的值..

实施例：假设我有一个输入

Customer: <input type="text" ng-model="name"/> <!--first input>
<a>Add more</a>

我很容易为它获得价值

All customers <p ng-bind="name"></p>

但是如果用户再添加一个客户名称输入，那么我该如何显示该值在＆＃34;所有客户

标签＆＃34;

All customers <p ng-bind="name"></p>  // Customer1,Customer1 name here

Answer 1

你必须创建阵列。

在您的控制器中

$scope.inputs = [];

$scope.add = function() {
    $scope.inputs.push({value: ''});
}
$scope.add();

现在用HTML

<div ng-repeat="input in inputs">
    <input type="text" ng-model="input.value" />
</div>
<button ng-click="add()">Add</button>

这是如何做到这一点的原始概念。

<强>更新

添加了plunker示例 http://plnkr.co/edit/bHLXCjsP46GiixysZZ83?p=preview

Answer 2

将范围内的对象数组与ng-repeat结合使用。然后该按钮将添加到数组中。

查看：

<p ng-repeat="item in array">Name: <input type="text" ng-model="item.name" ></p>
<button ng-click="add()">Add</button>
<p>All customers</p>
<p ng-repeat="item in array">{{item.name}}</p>

JS：

app.controller('MainCtrl', function($scope) {
  $scope.array = [];

  $scope.add = function () {
    $scope.array.push({ name: ''});
  }

  $scope.add();
});

Plunkr

Angular js动态输入和显示值

2 个答案: