Angularjs how to save data using two-way data binding

Question

I have an input

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

and field

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

I want to save user.name in span, then delete input value, type another user.name and save it to second span. So how to save unique name of each span, if when i clear input field, span value clears too?

Look into ng-repeat, I've updated my answer and I believe it does what you are asking. — Gary Holiday
– Gary Holiday, Commented Mar 27, 2017 at 23:10

Gary Holiday · Accepted Answer · 2017-03-27 23:11:00Z

1

You would need some type of action to take place so the code would know that you are done writing the name so for example you can have a button or if it's being done in a form then on the enter key it would trigger the code below.

You will also need to use an ng-repeat to display all the names

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>

Angular

$scope.names = [];

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

names will contain all the names that were entered into the input. Then ng-repeat will display all the names in <span> tags.

edited Mar 27, 2017 at 23:11

answered Mar 27, 2017 at 22:59

Gary Holiday

3,6124 gold badges37 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs how to save data using two-way data binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related