change attribute of target when click using angularJS

Question

<ul class="todo-list">
    <li ng-repeat="todo in todos">{{todo.todoContent}}<span class="pull-right glyphicon glyphicon-check" ng-class="{checked:todo.done}" ng-click="todoCheck(todo)" title="check this todo">check</span></li>
  </ul>

Now I want change title attribute to "uncheck this todo" and text "check" to "checked" when I click the span element to check target todo.
Anyone can help here. Thanks very much.

example fiddle

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

If you want more fine grained control over the element you clicked, you can do this by using the $event in the ng-click handler.

like

ng-click="todoCheck($event, todo)"

I have used jquery to set the title and content and updated your fiddle.

Here is the updated fiddle

$scope.todoCheck = function ($event, todo) {

   var spanElement = $event.srcElement;

   $(spanElement).attr('title', "uncheck this todo");

   $(spanElement).html("checked");

   todo.done = !todo.done;

};

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 13, 2013 at 8:42

Praveenram Balachandar

1,5851 gold badge13 silver badges16 bronze badges

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

1 Comment

tjfdfs Over a year ago

thanks too. another way to get this done. and yes, I may need to get element directly someday. :)

AlwaysALearner · Accepted Answer · 2013-09-13 08:26:08Z

2

<li ng-repeat="todo in todos">
    {{todo.todoContent}}
    <span class="pull-right glyphicon glyphicon-check" 
    ng-class="{checked:todo.done}" ng-click="todoCheck(todo)" 
    title="{{!todo.done && 'check this todo' || 'uncheck this todo'}}">
        {{!todo.done && 'check' || 'checked'}}
    </span>
</li>

answered Sep 13, 2013 at 8:26

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Collectives™ on Stack Overflow

change attribute of target when click using angularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related