如何修复此 ng-class 切换比较？

Question

http://plnkr.co/edit/7v63GXSIDon1QKm1GXCE?p=preview

我有一个 array 存储每个被点击按钮的名称。一旦点击对象被放入数组，我使用 ng-class 检查数组中对象的名称是否与用于创建按钮的模型相同。如果是这样，则打开或关闭 btn-info class。

ng-class="{'btn-info': toggleArray[k].name == m.name}"

不确定我的代码有什么问题，但是如果您按从 1 到 3 的确切顺序单击按钮，它会起作用。但是，一旦您开始随机单击按钮，它很快就会崩溃。

控制器

.controller('ArrayCtrl', ['$scope', function($scope) {

        // Init ArrayCtrl scope:
        // ---------------------
        var vs         = $scope;
        vs.message     = "Add and remove objects from array:";
        vs.toggleArray = [];
        vs.apiArray    = [{name: 'AAA'}, {name: 'BBB'}, {name: 'CCC'}];

        vs.selectBtn = function(btnObj) {
            var index = vs.toggleArray.indexOf(btnObj);
            if (index !== -1) {
                vs.toggleArray.splice(index, 1);
            } 
            else {
                vs.toggleArray.push(btnObj);
            }
        };

    }
]);

标记

<div class="model-btns">
    <ul>
      <li ng-repeat="(k, m) in apiArray"
          ng-click="selectBtn(m)"
          class="tag-li">
              <button class="btn"
                      ng-class="{'btn-info': toggleArray[k].name == m.name}">
                  {{m.name}}
              </button>
        </li>
    </ul>
  </div>

  <div class="well list-delete">
      <p>List to delete:</p>
      <ul>
          <li ng-repeat="item in toggleArray">
              {{item}}
          </li>
      </ul>
  </div>

Answer 1

问题就在这里：ng-class="{'btn-info': toggleArray[k].name == m.name}"

假设所有按钮都是"off"，那么toggleArray就是[]。您单击第二个按钮，因此 toggleArray 将变为 [ { "name": "BBB" } ]。但是在该按钮的 ng-class 表达式中，k 将为 1。因此 toggleArray[1] 未定义并且表达式永远不会为真，除非您先单击第一个项目，因此 toggleArray 有 2 个元素。

您可以简单地更改：

ng-class="{'btn-info': toggleArray[k].name == m.name}"

至：

ng-class="{'btn-info': toggleArray.indexOf(m) > -1}"

如图this plnkr.

如何修复此 ng-class 切换比较？

How to fix this ng-class toggle comparison?

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-click

angularjs-ng-class