javascript - 单击时添加复选标记,删除所有其他标记

标签 javascript angularjs

我有一个带有按钮的 ng-repeat,如下所示:

<div data-ng-repeat="department in departments_array">
    <div class="row">
        <div class="col-md-6 dslc-button-wrapper">
            <button class="btn btn-default btn-block">Show on Map {{ 1 | checkmark }}</button>
        </div>
    </div>
</div>

我找到了这个过滤器,我想用它在单击所选元素时显示一个复选框,并同时删除其他 ng-repeat 按钮中的所有其他复选标记:

angular.module('Filters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '';
  };
});

我已经尝试了尽可能多的方法,但最终只能一次添加或删除一个元素上的复选标记。

任何帮助将不胜感激

谢谢

最佳答案

就我个人而言,我不会使用过滤器来执行此操作。在您看来,这不是管理状态的正确方法。 Controller 上的变量是典型且可读的解决方案。下面的解决方案 Plunker :

controller.js

myApp.controller('myController', function() {
  var self = this;
  self.departments_array = ['dept A', 'dept B', 'dept C'];
  self.selected_dept = undefined;
});

index.html

  <body ng-app="my-app">
    <div ng-controller="myController as mc">
      <div data-ng-repeat="department in mc.departments_array">
          <div class="row">
              <div class="col-md-6 dslc-button-wrapper">
                  <button ng-click="mc.selected=department" class="btn btn-default btn-block">
                    Show on Map <span ng-show="mc.selected===department">&#10003;</span></button>
              </div>
          </div>
      </div>
    </div>
  </body>

关于javascript - 单击时添加复选标记,删除所有其他标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36275252/

相关文章:

javascript - 从收到的 http 请求中获取要执行的文件的路径

javascript - Angular : How to search in nested array?

javascript - Angular + ui-router::on 状态完成回调

javascript - AngularJS $filter(date) 返回错误的格式

angularjs - Karma 和 Ionic 上的 CordovaCamera 选项

Angularjs 嵌套状态 : 3 level

javascript - 没有函数的 JS 文件有什么意义吗?

javascript - 根据屏幕尺寸缩放多个元素

javascript - 从 PhantomJS onLoadFinished 回调调用函数

javascript - 类型错误:无法读取未定义的属性 'Eligible'