How can I make a button title equal to a value on my scope?

Question

I have a button inside of an ng-repeat div on my template, and I would like to set it's title property to be equal to a value from my scope, but it is showing up as the string, not the value.

template:

<div ng-repeat="step in steps">
  <button title="step.description">Text</button>
</div>

On hover, the above displays the literal string "step.description" instead of the value from my scope. Currently my controller has an array on it called steps, and each of the step objects in that array has a key named "description" set to a different string.

Answer 1

I think this link can help you. How do you get AngularJS to bind to the title attribute of an A tag?

<body ng-app="myApp">

    <div ng-controller="myCtrl">
          <div ng-repeat="step in steps">
          <button ng-attr-title="{{step.description}}">Text</button>
      </div>
    </div>  
  </body>

You can use ng-attr-title to bind value on hover. ng-attr is a new directive in AngularJS 1.1.4

 app.controller('myCtrl', ['$scope', function($scope){
        $scope.steps = [
          {
          description: 'Test1'
        },
         {
          description: 'Test2'
        },
         {
          description : 'Test3'
        }

        ];

Here is the link: https://plnkr.co/edit/Ql4GHSkcuD1r9SywL2mi?p=preview

How can I make a button title equal to a value on my scope?

Question

1 answers

solution1
4 ACCPTED 2016-02-26 04:18:03

How can I make a button title equal to a value on my scope?

Question

1 answers

solution1 4 ACCPTED 2016-02-26 04:18:03

solution1
4 ACCPTED 2016-02-26 04:18:03