javascript - Angularjs指令点击元素

标签 javascript angularjs angularjs-directive angularjs-scope

嗨,我想知道当我有来自 ng-repeat 的元素列表时,如何允许用户单击列表之一并通过 .css() 使其突出显示。那么,如果用户单击另一个元素,前一个元素会取消突出显示,而新单击的元素会突出显示?

谢谢

最佳答案

您可以尝试使用 ng-click 来设置所选项目,并使用 ng-class 应用条件 css 类:

<ul>
    <li ng-repeat="item in list" ng-class="{'highlight': model.selected == item}">
        <button ng-click="model.selected = item">Select</button>
    </li>
</ul>

在你的 Controller 中:

$scope.model = { selected : null };

我们需要使用一个对象来保存所选项目,以便 ng-repeat 的每个项目共享范围,否则,每个项目都会存在该范围,因此可以选择多个项目。

演示: http://plnkr.co/edit/EdrD7MvesW3xn9C9c6fk?p=preview

关于javascript - Angularjs指令点击元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19852722/

相关文章:

javascript - $q,延期和部分申请

javascript - 为什么此 JavaScript 无法在移动设备上运行

javascript - 使用addEventListener来替换每个onClick

javascript - 检测angularJS中的空字段

javascript - AngularJS $scope 变量仅通过 HTTP GET 设置一次

angularjs - 将数据从一个指令传递到另一个指令

javascript - Angular Directive(指令) Controller 看不到传递的参数更新

javascript - 带 Angular 权限指令

javascript - 造型 Facebook Likebox

JavaScript Node.normalize() 行为或错误?