Angularjs如何使用双向数据绑定来保存数据

时间:2017-03-27 22:54:41

标签: javascript html angularjs

我有一个输入

<input type="text" name="name" ng-model='user.name' 
       placeholder="name" ng-required='true'>

和字段

<span class="name">{{user.name}}</span>

我想在user.name中保存span,然后删除输入值,输入另一个user.name并将其保存到第二个span。那么如何保存每个span的唯一名称,如果我清除输入字段,跨度值也会清除?

1 个答案:

答案 0 :(得分:1)

您需要执行某种类型的操作,以便代码知道您已完成编写名称,例如您可以拥有button或者是否在{{form中完成然后在enter键上触发下面的代码。

您还需要使用ng-repeat来显示所有名称

<强> HTML

<!-- Enter in name -->
<input type="text" name="name"  ng-model='user.name' placeholder="name" ng-required='true'>

<!-- Save name -->
<button ng-click="saveName()">Save Name</button>

<!-- Display names -->
<span ng-repeat="name in names">{{name}}</span>

<强>角

$scope.names = [];

$scope.saveName = function() {
  $scope.names.push($scope.user.name);
  $scope.user.name = '';
};

names将包含输入到输入中的所有名称。然后ng-repeat将显示<span>代码中的所有名称。