Question

我有一个带有如下按钮的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' : '';
  };
});

我尝试了很多方法，但我只能设法最终能够在一个元素上添加或删除复选标记。

非常感谢任何帮助

由于

Answer 1

就我个人而言，我不会使用过滤器来执行此操作。它不是您视图中管理状态的正确方法。控制器上的变量是典型且可读的解决方案。以下解决方案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>

点击添加Checkmark，删除所有其他

1 个答案: