使用angularJS单击时更改目标的属性

时间:2013-09-13 08:18:47

标签: javascript angularjs attributes

<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元素以检查目标待办事项时将文本“检查”变为“已选中”。
任何人都可以帮到这里非常感谢。

example fiddle

2 个答案:

答案 0 :(得分:4)

如果您想对所单击的元素进行更细粒度的控制,可以使用ng-click处理程序中的$ event来完成此操作。

喜欢

  

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

我使用jquery来设置标题和内容并更新你的小提琴。

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;
     

};

答案 1 :(得分: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>