replace text in html with value from controller with angularjs

Question

I want to replace text in html with a value from a controller The original text string is image.name, which is the image title Via a click event from the 'GoToImage' controller, the span should replace the image.name with newName Now, it only adds the newName, but doesn't replace the image.name

Markup:

<div data-ng-controller="GoToImage"> 
<span data-ng-model="newName">
{{image.name}}
{{newName}}
</span>
</div>

the controller:

.controller('GoToImage', function ($scope) {
      $scope.newName = {};
      $scope.newDescription = {};
      $scope.selectedIndex = 0;
      $scope.setImage = function(index) {
        $scope.selectedIndex = index;
        $scope.newName = $scope.series.images[index].name;
        $scope.newDescription = $scope.series.images[index].description;
      }
  });

also, I cannot get rid of the {} signs which show by default before the click event is fired

Andy Gaskell · Accepted Answer · 2013-11-03 16:10:34Z

1

You could try creating a new property that returns the current value that should be used.

$scope.nameDisplay = image.name

Then later in your code you can update the nameDisplay property to the value of newName and your UI can just bind to {{nameDisplay}}.

answered Nov 3, 2013 at 16:10

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

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

Collectives™ on Stack Overflow

replace text in html with value from controller with angularjs

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