如何修复这个ng类切换比较?

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

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

I have an array which stores the name of each button that is clicked. Once clicked the object is placed into array, I use ng-class to check if the name of the object in the array is the same as the model used to create the button. Then if so toggle the btn-info class on or off.

我有一个数组，它存储被单击的每个按钮的名称。单击对象后，我使用ng-class检查数组中对象的名称是否与用于创建按钮的模型相同。然后，如果是这样，切换btn-info类的on或off。

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

Not sure what is wrong with my code but, but it works if you click the buttons in an exact order, from 1 to 3. However once you start randomly clicking buttons it breaks quickly.

我不知道我的代码出了什么问题，但是如果按从1到3的顺序点击按钮就可以了。然而，一旦你开始随机点击按钮，它就会很快崩溃。

The Controller

控制器

.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);
            }
        };

    }
]);

The Markup

标记

<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>

1 个解决方案

#1

The problem is right here: ng-class="{'btn-info': toggleArray[k].name == m.name}"

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

Let's say that all the buttons are "off", so the toggleArray is []. You click the second button, so toggleArray will be [ { "name": "BBB" } ]. But in the ng-class expression for that button, k will be 1. So toggleArray[1] is undefined and the expression is never true, unless you click first the first item so toggleArray has 2 elements.

假设所有的按钮都是“off”，所以toggleArray是[]。单击第二个按钮，那么toggleArray将是[{"name": "BBB"}]。但是在这个按钮的ng类表达式中，k是1。因此，toggleArray[1]是未定义的，表达式是不正确的，除非您首先单击第一个项，所以toggleArray有两个元素。

You can simply change:

你可以简单的改变:

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

to:

:

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

As illustrated in this plnkr.

如这个plnkr所示。