javascript - 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>

ここで、span 要素をクリックして対象の todo をチェックするときに、title 属性を「uncheck this todo」に変更し、テキスト「check」を「checked」に変更します。
誰でもここで助けることができます。どうもありがとう。

フィドルの例

Answer 1

クリックした要素をより細かく制御したい場合は、ng-click ハンドラーで $event を使用してこれを行うことができます。

お気に入り

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

jquery を使用してタイトルとコンテンツを設定し、フィドルを更新しました。

これが更新されたフィドルです

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

   var spanElement = $event.srcElement;

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

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

   todo.done = !todo.done;

};

Answer 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>