javascript - ng-repeat 中的折叠更改图标

Question

我使用 ng-repeat 在应用程序中显示日志。当我单击任何警报链接时，它们会展开并显示详细信息。 问题是当我们点击任何警报链接时所有图标都会改变，但我只想改变点击。 我不知道如何在 ng-repat 中解决这个问题，有什么解决办法吗？谢谢 看看jsfiddle 找到我的问题的解释

var myApp = angular.module('myApp', []);

myApp.controller("MyCtrl", function MyCtrl($scope) {

  $scope.colourIncludes = [];
  $scope.includeColour = function(priority) {
    var i = $.inArray(priority, $scope.colourIncludes);
    if (i > -1) {
      $scope.colourIncludes.splice(i, 1);
    } else {
      $scope.colourIncludes.push(priority);
    }
  }
  $scope.colourFilter = function(lists) {
    if ($scope.colourIncludes.length > 0) {
      if ($.inArray(lists.priority, $scope.colourIncludes) < 0)
        return;
    }

    return lists;
  }
  $scope.collapseIt = function(id) {
    $scope.collapseId = ($scope.collapseId == id) ? -1 : id;
  }




  $scope.lists = {
    "LOG1": [{
      "id": 52,
      "item_id": 999,
      "serial_number": "999-S",
      "priority": 1,
      "type": "ALARM_HUMIDITY_SENSOR",
      "created_dt": "2017-12-13 14:12:35",
      "update_dt": "2017-12-14 14:35:08"
    }, {
      "id": 57,
      "item_id": 1559,
      "serial_number": "1559-S",
      "priority": 1,
      "type": "ALARM_HUMIDITY_SENSOR",
      "created_dt": "2017-12-13 14:29:01",
      "update_dt": "2017-12-18 14:28:57"
    }, {
      "id": 62,
      "item_id": 1560,
      "serial_number": "1560-S",
      "priority": 1,
      "type": "ALARM_HUMIDITY_SENSOR",
      "created_dt": "2017-12-13 14:30:03",
      "update_dt": "2017-12-18 14:30:03"
    }],
    "LOG2": [{
      "id": 53,
      "item_id": 999,
      "serial_number": "999-S",
      "priority": 2,
      "type": "ALARM_BATTERY_VOLATAGE",
      "created_dt": "2017-12-13 14:12:35",
      "update_dt": "2017-12-14 14:35:08"
    }, {
      "id": 58,
      "item_id": 1559,
      "serial_number": "1559-S",
      "priority": 1,
      "type": "ALARM_BATTERY_VOLATAGE",
      "created_dt": "2017-12-13 14:29:01",
      "update_dt": "2017-12-18 14:28:57"
    }, {
      "id": 63,
      "item_id": 1560,
      "serial_number": "1560-S",
      "priority": 1,
      "type": "ALARM_BATTERY_VOLATAGE",
      "created_dt": "2017-12-13 14:30:03",
      "update_dt": "2017-12-18 14:30:03"
    }],
    "LOG3": [{
      "id": 54,
      "item_id": 999,
      "serial_number": "999-S",
      "priority": 1,
      "type": "ALARM_BATTERY_CURRENT",
      "created_dt": "2017-12-13 14:12:35",
      "update_dt": "2017-12-14 14:35:08"
    }, {
      "id": 59,
      "item_id": 1559,
      "serial_number": "1559-S",
      "priority": 1,
      "type": "ALARM_BATTERY_CURRENT",
      "created_dt": "2017-12-13 14:29:01",
      "update_dt": "2017-12-18 14:28:57"
    }, {
      "id": 64,
      "item_id": 1560,
      "serial_number": "1560-S",
      "priority": 1,
      "type": "ALARM_BATTERY_CURRENT",
      "created_dt": "2017-12-13 14:30:03",
      "update_dt": "2017-12-18 14:30:03"
    }]
  };
});
myApp.factory('serverResponseErrorsFactory', ['$filter', function($filter) {
  return {
    formatAndTranslateErrors: function(errors) {
      var errorMessage = "";
      var translatedErrors = [];
      angular.forEach(errors, function(err, key) {
        translatedErrors.push($filter('translate')(err))
      })
      errorMessage = translatedErrors.join("|");
      return errorMessage;
    }
  };
}]);

a[aria-expanded=true] .fa-chevron-right {
  display: none;
}

a[aria-expanded=false] .fa-chevron-down {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div ng-app="myApp">


  <div ng-controller="MyCtrl">
    <div class="logovi col-sm-12 col-md-12 col-xs-12">
      <h4>Summary</h4>
  <span>Try to click to any LOG end take a look on icon. All changes, but I want to change ony clicked</span><br>
      <input type="checkbox" ng-click="includeColour('2')" /> <img src="" alt="error" />
      <input type="checkbox" ng-click="includeColour('1')" /> <img src="" alt="warning" />
      <input type="checkbox" ng-click="includeColour('0')" /> <img src="" alt="success" />


      <div class="logBox" style="overflow-y: auto; height: 250px;">
        <div class="list" ng-repeat="(key, value) in lists">

          <a ng-click="collapseIt($index)" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample" style="cursor: pointer; text-decoration: none">{{key}}
        <span class="fa fa-chevron-right"></span>
                        <span class="fa fa-chevron-down"></span></a>
          <div id="collapseExample" class="list" ng-repeat="list in value track by list.id">
            <div ng-if="collapseId==$parent.$index">
              <span>
                  <img class="logImg" ng-if="list.priority == 0" src="" alt="success" />
                  <img class="logImg" ng-if="list.priority == 1" src="" alt="warning" />
                  <img class="logImg" ng-if="list.priority == 2" src="" alt="error" />
             </span>
              <span>
                   <strong>{{list.update_dt}}</strong>
                   </span>
              <span>{{list.type}}</span>
              <span>{{list.serial_number}}</span>
            </div>

          </div>
        </div>

      </div>
    </div>
  </div>


</div>

Answer 1

请检查更新的 fiddle https://jsfiddle.net/y2fg392b/4/

问题是所有三个列表的 href 和 id 组合在您的代码中是相同的。 我刚刚附加了 $index。